Canvas drawImage使用数据URL [英] Canvas drawImage using data URL

问题描述

我将从脚本开始：

  
 function saveInstance（）{
 _savedInstance = document.getElementById（'canvasID'）。toDataURL（）; 
} 
 function restoreInstance（）{
 ctx.drawImage（_savedInstance，0,0）; 
} 
  

目的是保存画布的实例，然后重新应用但是，我得到的错误说，不兼容的类型（未捕获的错误：TYPE_MISMATCH_ERR：DOM异常17 ）。是否有任何canvas方法允许我使用数据URL字符串重新绘制实例？

**如果有一个更好的方法来实现这个保存/恢复

-Firstmate

解决方案

是的，您可以使用 _savedInstance 创建一个图像元素，然后将其绘制到画布上。

  var img = new Image（）; 
 img.src = _savedInstance; 
 ctx.drawImage（img，0,0）; 
  

I'll start with the script:

  function saveInstance() {
   _savedInstance = document.getElementById('canvasID').toDataURL();
  }
  function restoreInstance() {
   ctx.drawImage(_savedInstance,0,0);
  }

The purpose is to save an instance of the canvas and re-apply it later [Similar to how ctx.save() saves the style and transformations].

However, I got the error that says incompatible types (Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17). Is there any canvas method that will allow me to use the data URL string to re-draw the instance?

**If there's a better way to implement this save/restore idea I have, that'd also be much appreciated.

-Firstmate

解决方案

Yes, you can create an image element with its source as _savedInstance and then draw it to the canvas.

var img = new Image();
img.src = _savedInstance;
ctx.drawImage(img,0,0);

这篇关于Canvas drawImage使用数据URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！