10 examples of 'how to serialize image with data in jquery' in JavaScript

52
function prepareImage(data) {
53
            undoCount = 0;
54
		    if (data.startsWith("data:image")) {
55
		        var img = document.createElement('img');
56
		        img.setAttribute("src", data);
57
		        img.addEventListener('load', function () {
58
		            processImage(img,false);
59
		        });
60
		    }
61
		    else {
62
		        alert("Unsupported file type")
63
		    }
64
		}

181
function addImage(parentObj, data, config){
182
    console.log(parentObj);
183
    var multiple = config.pick.multiple;
184
    var boxId = parentObj.parent().attr('data-boxId');
185
    var name = parentObj.parent().attr('data-name');
186
    var newLi = $('<li>'
187
        + ''
188
        + '<div>'
189
        + '<a href="'+ data.url +'">'
190
        + '<div>'
191
        + '</div></a>'
192
        + '<i></i>'
193
        + '</div>'
194
        + '</li>');
195
196
    // 判断是否是多图上传
197
    if (multiple == 'false' || multiple == false){
198
        parentObj.hide();
199
    }
200
201
    // 查找文本框并移除
202
    parentObj.parent().find('#'+boxId).remove();
203
    parentObj.before(newLi);
204
}

90
function toImageData (object) {
91
  if (isImage(object)) { return toImageDataFromImage(object); }
92
  if (isCanvas(object)) { return toImageDataFromCanvas(object); }
93
  if (isContext(object)) { return toImageDataFromContext(object); }
94
  if (isImageData(object)) { return object; }
95
}

57
function image(o) {
58
  if (o.width && o.height) {
59
    return chrome.runtime.getURL("data/images/origin/both.svg")
60
  } else if (o.width) {
61
    return chrome.runtime.getURL("data/images/origin/horizontal.svg")
62
  } else {
63
    return chrome.runtime.getURL("data/images/origin/vertical.svg")
64
  }
65
}

38
function generateImageHtml(data){
39
    var img = generateStarImage(data, 30);
40
    var html = document.createElement("td");
41
    html.appendChild(img);
42
    return html;
43
}

1
function to_data_url(image, canvas) {
2
  var ctx = canvas[0].getContext('2d');
3
  var width = image.width();
4
  var height = image.height();
5
  canvas.attr('width', width);
6
  canvas.attr('height', height);
7
  ctx.drawImage(image[0], 0, 0, width, height);
8
  return canvas[0].toDataURL('image/png');
9
}

107
function getBase64DataURL ( data, tyep ) {
108
109
    var canvas = document.createElement( "canvas" ),
110
        ctx = canvas.getContext( "2d" ),
111
        type = getImageType( tyep );
112
113
    canvas.width = data.width;
114
    canvas.height = data.height;
115
116
    var image = new Image();
117
    image.src = getSVGDataURL( data );
118
119
    if ( type !== "image/png" ) {
120
        ctx.fillStyle = "white";
121
        ctx.fillRect( 0, 0, canvas.width, canvas.height );
122
    }
123
124
    ctx.drawImage( image, 0, 0 );
125
126
    return canvas.toDataURL( type );
127
128
}

13
function imageDataToDataUrl(imageData) {
14
    var canvas = document.createElement('canvas');
15
    canvas.width = imageData.width;
16
    canvas.height = imageData.height;
17
    var ctx = canvas.getContext('2d');
18
    ctx.putImageData(imageData, 0, 0);
19
    return canvas.toDataURL();
20
}

118
function updateImage(data) {
119
    if (data) {
120
        chrome.storage.local.set({ "secure_img": data }, function() {
121
            console.log("Data Saved : ", data);
122
            $("#secureimage").attr("src", data.src);
123
        });
124
        // For Selected Image
125
    } else {
126
        chrome.storage.local.get("secure_img", function(result) {
127
            data = result.secure_img;
128
            $("#secureimage").attr("src", data.src);
129
            if (data.type === "custom"){
130
                $("#imagegallery #customimage").attr("src", data.src);
131
                $("#imagegallery #kp-custom-icons").text("favorite");
132
                $("#imageUpload").text("Change Image");
133
            } else if (data.type === "suggested" || data.type === "default" ){
134
                let p = "img[src$='" + data.src.split("assets/")[1] + "']:last";
135
                $(p).closest(".set-image").find(".kp-active-icons").text("favorite");
136
            }
137
        });
138
    }
139
}

44
set data (value) {
45
  if (value instanceof ArrayBuffer) {
46
    // TODO: push to server and then set to hash
47
    // this.src = hash
48
  } else if (value instanceof Blob) {
49
    // TODO: push to server and then set to hash
50
    // this.src = hash
51
  }
52
}