个人中心
gpt4 book ai didi

javascript - 使用图案填充时 canvas.toblob 失败

转载 作者：行者123 更新时间：2023-11-29 19:50:48 30 4
gpt4 key购买 nike

我一直在努力寻找一种将 Canvas 保存到文件的方法。我的图片太大，无法使用dataToUrl，所以我一直在尝试各种toblob方法。似乎当使用图案填充时，toblob 不起作用。如果这有可能奏效，或者是否有另一种方法可以做到这一点，有人能告诉我吗？谢谢

jfiddle example 

<!DOCTYPE html>
<html>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script src="jquery.min.js"></script>
<script src="canvas-to-blob.js"/></script>
<script src="FileSaver.js-master\FileSaver.js"></script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var img = new Image();
img.src = "http://www.w3schools.com/tags/img_lamp.jpg";
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);

//Works with color, but not with pattern
ctx.fillStyle = pat;
//ctx.fillStyle = 'blue';

ctx.fill();

try {
    var isFileSaverSupported = !! new Blob();
} catch (e) {
    alert(e);
}
alert("toBlob");
c.toBlob(function (blob) {
    alert("success");
    saveAs(blob, "TruVue.png");
});
</script>
</html>

最佳答案

原因是由于CORS ，来自其他域的图像受到限制 - 您可以在 Canvas 上显示它们，但不能提取它们的位图。

由于 toBlob 是一种位图提取方法，如 toDataURL 或 getImageData 您将无法使用这些图像。

有几个解决方法:

  • 将图像上传到您自己的服务器并从那里加载(与您用于该页面的域相同)。
  • 修改其他服务器以包含 Access-Control-Allow-Origin header (在这种情况下可能无法执行)。
  • 使用您自己的服务器作为图片代理

顺便说一句:您还应该使用图像的 onload 事件来确保图像在使用图像之前得到正确加载:

var img = new Image();
img.onload = drawFunction;
img.src = "http://www.w3schools.com/tags/img_lamp.jpg";

function drawFunction() {
    /// draw here
}

关于javascript - 使用图案填充时 canvas.toblob 失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17868316/

30 4 0
文章推荐： javascript - 为什么 Lawnchair 的 webkit-sqlite 适配器将键转换为字符串？
文章推荐： php - 如何在网站上将 mysql 中的 'field' 显示为 PHP 表？
文章推荐： javascript - 在模糊事件不起作用时给出错误
文章推荐： mysql - HAVING COUNT 接收其他 COUNT 值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com