javaScript 使用canvas转图图转canvas

最新推荐文章于 2024-07-11 21:32:10 发布

web修理工

最新推荐文章于 2024-07-11 21:32:10 发布

阅读量548

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42374676/article/details/115054469

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

使用JavaScript将图片拷贝进画布

function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}

用JavaScript将画布保持成图片格式

// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

转载:https://www.webhek.com/post/convert-canvas-image.html

var list=document.getElementsByTagName('canvas');
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
};
var arr=[];
for(let i=0;i<list.length;i++){ arr.push(convertCanvasToImage(list[i]))};
var a=document.createElement('a')
arr.forEach((item,index)=>{
a.href=item.src
a.download=index+'.png'
a.click()

})


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function imgToBase64(imgSrc, imgType, callback) {
            let type = imgType || 'image/png',
                dataURL,
                img = new Image();
            // 允许资源跨域使用
            img.setAttribute('crossOrigin', 'anonymous');
            img.src = imgSrc;
            img.onload = function () {
                let imgWidth = img.width,
                    imgHeight = img.height;

                let canvas = document.createElement('canvas'),
                    ctx = canvas.getContext('2d');
                canvas.width = imgWidth;
                canvas.height = imgHeight;
                ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
                dataURL = canvas.toDataURL(type);
                console.log(dataURL);
                callback && callback(dataURL)
                return dataURL
            }
        }
        imgToBase64('./1.png', (src) => {
            console.log(src, '===src')
        })
    </script>
</body>

</html>

web修理工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaScript 使用canvas转图图转canvas

使用JavaScript将图片拷贝进画布function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas;}用JavaScript将画布保持成图片
复制链接

扫一扫