9 examples of 'get image from canvas' in JavaScript

50
function getImageAsCanvas(image) {
51
    var
52
        result = document.createElement("canvas"),
53
        context = result.getContext("2d");
54
55
    result.width = image.width;
56
    result.height = image.height;
57
58
    context.putImageData(image.imageData, 0, 0);
59
60
    return result;
61
}

1
function get_image_data (canvas) {
2
  return canvas.context().getImageData(0, 0, canvas.width, canvas.height) ;
3
	
4
}

49
export function imageToCanvas(image) {
50
	var canvas = document.createElement("canvas");
51
	canvas.width = image.width;
52
	canvas.height = image.height;
53
	canvas.getContext("2d").drawImage(image, 0, 0);
54
	return canvas;
55
}

176
function drawImgToCanvas(img, id) {
177
    let canvas = document.getElementById(id);
178
    let ctx = canvas.getContext('2d');
179
180
    canvas.width = img.width;
181
    canvas.height = img.height;
182
183
    ctx.drawImage(img, 0, 0);
184
}

131
export function drawImageOnCanvas(image, canvas) {
132
    canvas.getContext('2d').drawImage(image, 0, 0);
133
134
    return canvas;
135
}

179
function sendImagefromCanvas() {
180
181
    //Make sure the canvas is set to the current video size
182
    imageCanvas.width = v.videoWidth;
183
    imageCanvas.height = v.videoHeight;
184
185
    imageCtx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight);
186
187
    //Convert the canvas to blob and post the file
188
    imageCanvas.toBlob(postFile, 'image/jpeg');
189
}

110
function drawImage(img, canvas) {
111
  const ctx = canvas.getContext('2d');
112
113
  canvas.width = img.width;
114
  canvas.height = img.height;
115
  ctx.drawImage(img, 0, 0);
116
  return canvas;
117
}

3
function getImageDataFromImage(image) {
4
    let canvas = document.createElement("canvas"),
5
        context = canvas.getContext("2d"),
6
        w = image.width,
7
        h = image.height;
8
9
    canvas.width = w;
10
    canvas.height = h;
11
12
    context.drawImage(image, 0, 0);
13
14
    return context.getImageData(0, 0, w, h);
15
}

483
function doImage(err, canvas) {
484
       var img = document.createElement('img');
485
       var dimensions = map.getSize();
486
       img.width = dimensions.x;
487
       img.height = dimensions.y;
488
       img.src = canvas.toDataURL("image/png");
489
490
       var suffixe_file = $("select").val()[0];
491
       var suffix;
492
       auj = new Date();
493
       auj.setDate(auj.getDate() - 1);
494
       auj = auj.getFullYear() + '_' + parseInt(auj.getMonth() + 1) + '_' + auj.getDate(); 
495
       if (suffixe_file === "1") {
496
           suffix = 'centres_ebola_guinee_' + auj;
497
       }
498
       else if (suffixe_file === "2") {
499
           suffix = 'cte_guinee_' + auj;
500
       }
501
       else if (suffixe_file === "3") {
502
           suffix = 'cdt_guinee_' + auj;
503
       }
504
       else if (suffixe_file === "4") {
505
           suffix = 'cts_guinee_' + auj;
506
       }
507
       else{
508
           suffix = 'labos_guinee_' + auj;
509
       };
510
       
511
       $("a#print").attr("download", suffix + '.png')
512
       $("a#print").attr("href", img.src)
513
514
       $('#wheel').hide();
515
       $("a#print").html("Télécharger la carte");
516
       $('.dlmap').fadeIn("slow");
517
   }