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

Question

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

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

Я использую

var strDataURI = oCanvas.toDataURL();

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

Я хочу использовать strDataURI и создать образ ? Это возможно ?

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

595 4

html5 canvas image data-uri

4 ответов:

Comments

Ничего не найдено.

Phrogz · Accepted Answer · 2017-05-23 15:34:38

учитывая URL-адрес данных, вы можете создать изображение (либо на странице, либо чисто в JS), установив src изображения на URL-адрес данных. Например:
var img = new Image;
img.src = strDataURI;
The drawImage() метод из контекста 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 данных участвует. На основе экспериментальных испытаний от этот вопрос, это не безопасно. Приведенная выше последовательность-создайте образ, установите onload использовать новое изображение, и затем установить src - необходимо для некоторых браузеров, чтобы уверенно использовать результаты.

Raphael C · Accepted Answer · 2014-11-27 13:00:47

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);
}

score 2 · Accepted Answer · 2013-08-11 16:45:39

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

(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);

user475434 · Accepted Answer · 2011-01-23 16:25:48

в javascript, используя jquery для выбора идентификатора холста:
 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>