前端使用canvas保存图片，把div保存为图片

前端工作中，有时会遇到保存图片，或者保存一个div为图片 ---------上代码

使用canvas保存一张图片

<img id="ringoImage" alt="" src=""/></p>
<div><a onclick="down()" href="javascript:void(0);">下载图片</div>
<div class="base64"></div>

<script type="text/javascript">
/* 根据图片生成画布*/
function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;//canvas画布的宽度
    canvas.height = image.height;//canvas画布大小
    canvas.getContext("2d").drawImage(image, 0, 0);
    //canvas.getContext("2d").drawImage(image, 0, 0,300,300);
    return canvas;
}
/* 下载图片*/
function down() {
	var img1 = new Image();
	img1.crossOrigin = "";//解决跨域
	img1.src = '/img/order/icon_code.png' //图片地址
	img1.onload = function () {
		//把图片画到canvas上
	 	canvas = convertImageToCanvas(img1 );
		var image = canvas.toDataURL("image/jpeg");
		var $a = document.createElement('a');
		$a.setAttribute("href", image);
		$a.setAttribute("download", "揽收点二维码.jpg");//需要加上后缀名
		document.body.appendChild($a);
		$a.click();
		document.body.removeChild($a);
	}
}
</script>

将img图片塞进创建的canvas中画布，怎么将div转换成img格式?？
首先先准备js文件：html2canvas.js

<body>
    <div id="test" style = " width: 500px;height: 200px;background: red;"></div>
    <button onclick="downloadBTN()">查询 </button>
    <a id="down_button">下载</a>
</body>
<script src="html2canvas.js"></script>
<script src="jquery.min-1.10.2.js"></script>
<script type="text/javascript">
    function downloadBTN(){
       html2canvas($("#test"), {
            onrendered: function (canvas) {
                $('#down_button').attr('href', canvas.toDataURL());
                console.log(canvas.toDataURL());
                $('#down_button').attr('download', 'myjobdeer.png');
                //模拟a标签必须使用[0]  不能直接$('#').click()
                $('#down_button')[0].click();
            }
        });
    }
</script>

html2canvas是将你获取的元素id生成画布图，然后返回画布元素直接可以拿来使用其方法。
借鉴地址添加链接描述

前端使用canvas保存图片，把div保存为图片

猜你喜欢