html canvas 被污染

当html中的图片来自于另外一个网站时，canvas被污染，这样，toDataURL和toBlob等函数等都不可以输出了，当canvas被污染的时候怎么做？https://developer.mozilla.org/的解决方案如下图：

canvas 其中的图片来自于另外一个网站，再在四周画一个框，然后输出，正常。

show me the code

代码如下，和官方解决方式不太一样，我们使用下载图片，得到二进制来做这个事情。一样达到效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas toBlob and download</title>
</head>
<body>
<!-- <img src ="http://192.168.0.129:8089/0.png" />  -->
<canvas id="canvas"></canvas></body>
<script>function downloadByBlob(blobObj) {const link = document.createElement('a');link.style.display = 'none';const downloadUrl = window.URL.createObjectURL(blobObj);link.href = downloadUrl;link.download = `test.png`;document.body.appendChild(link);link.click();link.remove();};function getImageBlob(ctx,url,callback) {const xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.onload = function () {if (parseInt(this.status, 10) === 200) {if (typeof callback === 'function') {callback(ctx,URL.createObjectURL(this.response));}}};xhr.send();}function getImage(ctx, e) {const img = new Image();img.src = e;img.onload = function () {ctx.rect(0,0,640,360);  ctx.lineWidth = 10;ctx.strokeStyle = "red";ctx.stroke();ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 400);canvas.toBlob(function (blob) {url = URL.createObjectURL(blob);downloadByBlob(blob);});}}var canvas = document.getElementById("canvas");canvas.width = 640;canvas.height = 360;var context = canvas.getContext('2d');getImageBlob(context,'http://192.168.0.129:8089/0.png', getImage);// getImageBlob(context,'http://192.168.0.240:3002/cache/convert/97e2e43c222f86e4e4293f2b6996a51f/0.png', //         getImage);// var dImg = document.createElement("img");// //dImg.crossOrigin = "*";// dImg.src = "http://192.168.0.240:3002/cache/convert/97e2e43c222f86e4e4293f2b6996a51f/0.png"// dImg.onload = function(){//     //URL.revokeObjectURL(url);// dImg.setAttribute("crossOrigin",'Anonymous')//     console.log("draw over");//     context.rect(0,0,640,360);  // context.moveTo(10,10);// context.lineTo(100,100);// context.lineTo(500,100);// context.lineWidth = 10;// context.strokeStyle = "red";// context.stroke();// context.drawImage(dImg,0,0,200,400);//     canvas.toBlob(// function (blob) {//     var newImg = document.createElement("img"),//         url = URL.createObjectURL(blob);//     downloadByBlob(blob);//     newImg.onload = function () {//         URL.revokeObjectURL(url);//     };//     newImg.src = url;//     document.body.appendChild(newImg);// });
</script>
</html>

html canvas blob image 污染源相关推荐

html5制作风车旋转,HTML5 Canvas 旋转风车绘制
写在前面: 亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解. 在进行教学之前,我想聪明的你已经掌握了基本的Canvas基本操作方法,如果对Canvas还不是很了解,那么 ...
Canvas 旋转风车绘制
写在前面: 亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解,如果本文对你有一丁点帮助,还请劳驾您给我点个赞,您的认可将是我坚持下去的强大动力!谢谢! 在进行教学之前 ...
前端下载图片的N种方法
前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说不行的笔者最后又行了,所以趁着这个机会来总结一下下载图片到底有多少种方法. 先起个服务使用expressjs起个简单 ...
PDFProcessor新功能：不下载，直接预览pdf
2022/6/23 近期的一些计划,关于发布开源包到npm_董厂长的博客-CSDN博客最近的一些工作都是在搞pdf文件的处理,整合了各种各样的包(pdf.js, pdf-lib, downlaod.j ...
6种实现前端下载图片的方法汇总
来源 | https://www.cnblogs.com/wanglinmantan/p/15088419.html 前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说 ...
前端图片canvas，file，blob，DataURL等格式转换
最近用到一些图片相关的操作,记录一下笔记. 将file转化成base64 场景: 获取到一个file类型的图片,如果直接在html中预览?这里就是利用html5的新特性,将图片转换为Base64的形式 ...
javascript ~~canvas url blob转换
1.canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = ca ...
Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换
前端图片canvas,file,blob,DataURL等格式转换最近用到一些图片相关的操作,记录一下笔记. 将file转化成base64 场景: 获取到一个file类型的图片,如果直接在html中预 ...
IE浏览器对象不支持Blob属性或方法，IE浏览器不支持canvas toBlob()方法的Polyfill
前言:由于有裁剪图像的需求,所以就应用了Cropper.js插件,但是在IE浏览器就爆出了兼容blob问题. 解决方案:其实在https://www.canvasapi.cn/HTMLCanvasEl ...

html canvas blob image 污染源

html canvas 被污染

show me the code

html canvas blob image 污染源相关推荐

最新文章

热门文章