关于pc端和移动端长长按图保存到本地的问题

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这种格式，而不是文件资源！

    <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{
             0;
            height: 0;
        }
        .saveImg1{
             100%;
            height: 100%;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- <img id="image" style=" 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=" 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>

 4.自己用canvas画图并下载

<div id="app"></div>
    <canvas id="canvas" width="400" height="400"></canvas>
    <div>
        <button id="save">保存</button>
    </div>
</body>
<script>
    var arr = [
        {locations:[[0,0],[200,200],[0,400]],color:"red"},
        {locations:[[0,0],[400,0],[200,200]],color:"orange"},
        {locations:[[0,400],[100,300],[200,400]],color:"yellow"},
        {locations:[[100,300],[200,200],[300,300],[200,400]],color:"green"},
        {locations:[[300,100],[200,200],[300,300]],color:"blue"},
        {locations:[[300,100],[400,0],[400,200],[300,300]],color:"indigo"},
        {locations:[[200,400],[400,400],[400,200]],color:"purple"}
    ];
    var oCanvas = document.getElementById("canvas");
    var ctx = oCanvas.getContext("2d");
    for(let i=0;i<arr.length;i++){
        draw(arr[i],ctx);
    }

    function draw(item,ctx){
        ctx.beginPath();
        ctx.moveTo(item.locations[0][0],item.locations[0][1]);
        for(let i = 0;i<item.locations.length;i++){
            let x = item.locations[i][0];
            let y = item.locations[i][1];
            ctx.lineTo(x,y);
            console.log(1234567)
        }
        ctx.closePath();

        ctx.fillStyle = item.color;
        ctx.fill();

        ctx.strokeStyle = "#000";
        ctx.lineWidth = 2;
        ctx.stroke();
    }
    var imgId = document.getElementById("imgId");
    document.getElementById("save").onclick = function (){
        console.log('canvas',canvas)
        downLoad(saveAsPNG(canvas));
    }

    // 保存成png格式的图片
    function saveAsPNG(canvas) {
        return canvas.toDataURL("image/png");
    }

    // 保存成jpg格式的图片
    function saveAsJPG(canvas) {
        return canvas.toDataURL("image/jpeg");
    }

    // 保存成bmp格式的图片  目前浏览器支持性不好
    function saveAsBMP(canvas) {
        return canvas.toDataURL("image/bmp");
    }

    /**
     * @author web得胜
     * @param {String} url 需要下载的文件地址
     * */
    function downLoad(url){
        var oA = document.createElement("a");
        oA.download = 'img';// 设置下载的文件名，默认是'下载'
        oA.href = url;
        document.body.appendChild(oA);
        console.log(oA)
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除
    }
</script>