Рисование изображения из URL-адреса данных на холст

Question

Как открыть изображение на холсте? который кодируется

Я использую

var strDataURI = oCanvas.toDataURL(); 

Выходной сигнал является кодированной базой 64 изображения. Как я могу нарисовать это изображение на холсте?

Я хочу использовать strDataURI и создать изображение? Возможно ли это?
Если это не то, что может быть решением для загрузки изображения на холст?

Answer 1

Учитывая URL данных, вы можете создать образ (либо на странице или чисто в JS) путем установки src изображения на ваш URL-адрес данных. Например:

var img = new Image; 
img.src = strDataURI; 

drawImage() method в HTML5 Canvas Контекст позволяет копировать все или часть изображения (или холст, или видео) на холсте.

Вы можете использовать его так:

var myCanvas = document.getElementById('my_canvas_id'); 
var ctx = myCanvas.getContext('2d'); 
var img = new Image; 
img.onload = function(){ 
    ctx.drawImage(img,0,0); // Or at whatever offset you like 
}; 
img.src = strDataURI; 

Edit: Я ранее предложил в этом пространстве, что оно не может быть необходимо использовать onload обработчик, когда данные URI участвует. Основываясь на экспериментальных тестах от this question, это небезопасно. Вышеуказанная последовательность - создайте изображение, установите onload, чтобы использовать новое изображение, и , а затем, установите src - необходимо, чтобы некоторые браузеры использовали результаты.

Answer 2

в JavaScript, с помощью JQuery для выбора холста ID:

var Canvas2 = $("#canvas2")[0]; 
     var Context2 = Canvas2.getContext("2d"); 
     var image = new Image(); 
     image.src = "images/eye.jpg"; 
     Context2.drawImage(image, 0, 0); 

html5:

<canvas id="canvas2"></canvas> 

Answer 3

Возможно, эта скрипка поможет ThumbGen - jsFiddle Он использует File API и Canvas для динамического создания эскизов изображений.

(function (doc) { 
    var oError = null; 
    var oFileIn = doc.getElementById('fileIn'); 
    var oFileReader = new FileReader(); 
    var oImage = new Image(); 
    oFileIn.addEventListener('change', function() { 
     var oFile = this.files[0]; 
     var oLogInfo = doc.getElementById('logInfo'); 
     var rFltr = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i 
     try { 
      if (rFltr.test(oFile.type)) { 
       oFileReader.readAsDataURL(oFile); 
       oLogInfo.setAttribute('class', 'message info'); 
       throw 'Preview for ' + oFile.name; 
      } else { 
       oLogInfo.setAttribute('class', 'message error'); 
       throw oFile.name + ' is not a valid image'; 
      } 
     } catch (err) { 
      if (oError) { 
       oLogInfo.removeChild(oError); 
       oError = null; 
       $('#logInfo').fadeOut(); 
       $('#imgThumb').fadeOut(); 
      } 
      oError = doc.createTextNode(err); 
      oLogInfo.appendChild(oError); 
      $('#logInfo').fadeIn(); 
     } 
    }, false); 
    oFileReader.addEventListener('load', function (e) { 
     oImage.src = e.target.result; 
    }, false); 
    oImage.addEventListener('load', function() { 
     if (oCanvas) { 
      oCanvas = null; 
      oContext = null; 
      $('#imgThumb').fadeOut(); 
     } 
     var oCanvas = doc.getElementById('imgThumb'); 
     var oContext = oCanvas.getContext('2d'); 
     var nWidth = (this.width > 500) ? this.width/4 : this.width; 
     var nHeight = (this.height > 500) ? this.height/4 : this.height; 
     oCanvas.setAttribute('width', nWidth); 
     oCanvas.setAttribute('height', nHeight); 
     oContext.drawImage(this, 0, 0, nWidth, nHeight); 
     $('#imgThumb').fadeIn(); 
    }, false); 
})(document); 

Answer 4

function drawDataURIOnCanvas(strDataURI, canvas) { 
    "use strict"; 
    var img = new window.Image(); 
    img.addEventListener("load", function() { 
     canvas.getContext("2d").drawImage(img, 0, 0); 
    }); 
    img.setAttribute("src", strDataURI); 
}