前端工作中,有时会遇到保存图片,或者保存一个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生成画布图,然后返回画布元素直接可以拿来使用其方法。
借鉴地址添加链接描述