将图像从数据URL绘制到画布


112

如何在“画布”中打开图像?被编码

我正在使用

var strDataURI = oCanvas.toDataURL(); 

输出是已编码的base 64图像。如何在画布上绘制此图像?

我要使用strDataURI 并创建图片吗?可能吗?
如果不是,那么将图像加载到画布上的解决方案可能是什么?


它在这种情况下不起作用
arqam,2017年

Answers:


194

给定一个数据URL,您可以通过将图像的设置为数据URL来创建图像(在页面上或仅在JS中)src。例如:

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

HTML5 Canvas Context 的drawImage()方法使您可以将图像(或画布或视频)的全部或部分复制到画布上。

您可以这样使用它:

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;

编辑:我之前在此空间中建议,onload当涉及到数据URI时,可能不必使用处理程序。根据该问题的实验测试,这样做是不安全的。上面的序列(创建图像,将设置onload为使用新图像,然后设置)src对于某些浏览器肯定使用结果是必要的。


5
使用onload处理程序绝对是一个好主意。加载图像可能需要一段时间,因此最好安全播放。:)
JuhoVepsäläinen2011年

1
@bebraw让我们确定一下:stackoverflow.com/questions/4776670/… :)
Phrogz'1

@Phrogz它给我一个错误:var ctx = myCanvas.getContext('2d'); 只需复制/
粘贴

@jepser canvas页面上是否有具有该ID 的元素?您确保myCanvas不为空吗?如果仍然有问题,请发表您自己的问题,或访问JavaScript聊天频道
Phrogz

@DavidMurdoch很好的信息。您是否有可以链接到的Chromium错误,以便用户知道上述声明何时不再成立?
Phrogz

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

2

也许这个小提琴会帮助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);

0

您可能想要在设置新图像之前清除旧图像。

您还需要为新图像更新画布大小。

这是我在项目中的工作方式:

    // on image load update Canvas Image 
    this.image.onload = () => {

      // Clear Old Image and Reset Bounds
      canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.canvas.height = this.image.height;
      this.canvas.width = this.image.width;

      // Redraw Image
      canvasContext.drawImage(
        this.image,
        0,
        0,
        this.image.width,
        this.image.height
      );
    };

-4

在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>

1
这不能回答OP与dataURL有关的问题。
Phrogz 2011年

7
为什么要使用jQuery选择画布?键入document.getElementById()太多工作了吗?
斯科特,

该代码有效,尽管与问题无关
Mohammad Ashfaq 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.