1.pc端：
<canvas id='canvas' width="500" height="500"></canvas>
<!-- <img src="http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg" > -->
<button id="save">保存</button>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
// 内存中先加载，然后当内存加载完毕时，再把内存中的数据填充到我们的 dom元素中，这样能够快速的去
// 反应，比如网易的图片
var img = new Image();
img.setAttribute("crossOrigin",'anonymous');//需要放在图片赋值前，否则部分浏览器会报错
img.onload = function(){
// alert('加载完毕')
// 将图片画到canvas上面上去！
ctx.drawImage(img,593,327,500,500,100,100,300,300);
}
img.src = "http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";
// img.src = "http://rc.rry.info/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.chanPayQrcode&url=https://qr.alipay.com/bax062248bb2tkmy1ubv2071";
}
document.getElementById("save").onclick = function (){
console.log('canvas',canvas)
downLoad(saveAsJPG(canvas));
}
// 保存成png格式的图片
function saveAsPNG(canvas) {
return canvas.toDataURL("image/png");
}
// 保存成jpg格式的图片
function saveAsJPG(canvas) {
return canvas.toDataURL("image/jpeg");
}
function downLoad(url){
var oA = document.createElement("a");
oA.download = 'img';// 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
</script>2.移动端：此方法针对多组图片，多个图片可以添加相同的class然后js根据class的长度来进行操作。其中主要用到plus.downloader.createDownload(url, options, completedCB);
- url: ( String ) 必选 要下载文件资源地址
要下载文件的url地址，仅支持网络资源地址，支持http或https协议。 允许创建多个相同url地址的下载任务。 注意：如果url地址中包含中文或空格等，需要进行urlencode转换。 - options: ( DownloadOptions ) 可选 下载任务的参数
可通过此参数设置下载任务属性，如保存文件路径、下载优先级等。 - completedCB: ( DownloadCompletedCallback ) 可选 下载任务完成回调函数
当下载任务下载完成时触发，成功或失败都会触发
<img src="H5canvas鼠标经过的地方星星连接/xkbg.png" id="image">
<!-- 弹框的html-->
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom" style="z-index: 99999999">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="javascript:;" id="saveImg">保存图片</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<script type="text/javascript">
mui.init( { gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:true,//默认为false，不监听
release:false//默认为false，不监听
}});
document.getElementById('image').onclick = function(){
//给需要长按保存图片的img标签设置 class='saveImg'
var divs = document.getElementsByClassName('saveImg');
for(var i = 0;i<divs.length;i++){
divs[i].addEventListener('longtap', function () {
//开启弹框
mui('#picture').popover('toggle');
console.log(this.src)
var imgurl = this.src;
document.getElementById('saveImg').addEventListener('tap', function () {
var imgDtask = plus.downloader.createDownload(imgurl,{method:'GET'}, function (d,status) {
if(status == 200){
plus.gallery.save(d.filename, function () {//保存到相册
plus.io.resolveLocalFileSystemURL(d.filename, function (enpty) {
// 关闭弹框
mui('#picture').popover('toggle');
mui.toast('保存成功')
});
})
}else{
mui.toast('保存失败')
}
});
imgDtask.start();
});
})
}
}
</script>3.移动端单张图片：注意plus.downloader.createDownload(url, options, completedCB)中的url是图片在服务器端的路径比如：https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1335795923,3245280170&fm=15&gp=0.jpg这种格式，而不是文件资源！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/jquery-2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style type="text/css">
#imageList{
display: flex;
}
.cs{
width: 0;
height: 0;
}
.saveImg1{
width: 100%;
height: 100%;
visibility: hidden;
}
</style>
</head>
<body>
<!-- <img id="image" style="width: 300px;height: 300px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571203612306&di=42932c7868bcb8054af73d53d0b24ff6&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F28ea2e5cf17173f84ef74064e95627cc3ba75fe627e71-hKNgS4_fw658" > -->
<div class="imageList">
<div id="">
<canvas id='canvas' width="300" height="300"></canvas>
</div>
<div class="cs">
<img class="saveImg1" style="width: 200px;height: 200px;" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1335795923,3245280170&fm=15&gp=0.jpg" >
</div>
<div id="image">
保存
</div>
</div>
<!-- 弹框的html-->
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom" style="z-index: 99999999">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="javascript:;" id="saveImg">保存图片</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<script type="text/javascript">
mui.init( { gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:true,//默认为false，不监听
release:false//默认为false，不监听
}});
window.onload = function(){
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
// 内存中先加载，然后当内存加载完毕时，再把内存中的数据填充到我们的 dom元素中，这样能够快速的去
// 反应，比如网易的图片
var img = new Image();
img.setAttribute("crossOrigin",'anonymous');//需要放在图片赋值前，否则部分浏览器会报错
img.onload = function(){
// 将图片画到canvas上面上去！
ctx.drawImage(img,593,327,500,500,100,100,300,300);
}
img.src = "http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";
// img.src = "http://rc.rry.info/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.chanPayQrcode&url=https://qr.alipay.com/bax062248bb2tkmy1ubv2071";
$('.saveImg1').attr('src',img.src)
}
// document.getElementById('image').addEventListener('tap',function(){
console.log('点击图片了')
//给需要长按保存图片的img标签设置 class='saveImg'
var divs = $('.saveImg1');
$('#canvas')[0].addEventListener('longtap', function () {
//开启弹框
mui('#picture').popover('toggle');
var imgurl = divs[0].src;
document.getElementById('saveImg').addEventListener('tap', function () {
var imgDtask = plus.downloader.createDownload(imgurl,{method:'GET'}, function (d,status) {
console.log(typeof(imgurl))
console.log(imgurl)
console.log(JSON.stringify(d))
console.log(JSON.stringify(status))
if(status == 200){
plus.gallery.save(d.filename, function () {//保存到相册
plus.io.resolveLocalFileSystemURL(d.filename, function (enpty) {
// 关闭弹框
mui('#picture').popover('toggle');
mui.toast('保存成功')
});
})
}else{
mui.toast('保存失败')
}
});
imgDtask.start();
});
})
</script>
</body>
</html>