JS 保存图片到本地相册

方法1:

img 标签实现（亲测，使用无误）

html:

注：crossorigin="anonymous" 必填

<img src="http://www..." crossorigin="anonymous" id="canvas_img_download" alt="" width="100%" >

JS ：

下侧方法是结合 TS 封装的使用canvas转译，a标签下载图片到本地相册。

/**

    * @params

    * selector #canvas_img_download

    * name 图片名字

    */

    private downloadCanvasIamge(selector:any, name:any) {

        const img:any = document.querySelector(selector);

        let canvas:any = document.createElement('canvas');

        canvas.width = img.width;

        canvas.height = img.height;

        let context:any = canvas.getContext('2d');

        context.drawImage(img, 0, 0, canvas.width, canvas.height);

        const url:any = canvas.toDataURL('image/png');

        // 生成一个a元素

        let a:any = document.createElement('a');

        // 创建一个单击事件

        let event:any = new MouseEvent('click');

        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称

        a.download = name || '下载图片名称';

        // 将生成的URL设置为a.href属性

        a.href = url;

        // 触发a的单击事件

        a.dispatchEvent(event);

        this.closeShareBiddingGood();

    }

方法2：

有的小伙伴可能考虑不使用img，或者无法使用img标签实现。

使用下面方法实现：

function downloadCanvasIamge(selector, name){

        var image = new Image()

        // 解决跨域 Canvas 污染问题    image.setAttribute('crossOrigin', 'anonymous')

        image.onload = function(){

            var canvas = document.createElement('canvas')

            canvas.width = image.width

            canvas.height = image.height

            var context = canvas.getContext('2d')

            context.drawImage(image, 0, 0, image.width, image.height)

            var url = canvas.toDataURL('image/png')

            // 生成一个a元素       

            var a = document.createElement('a')

            // 创建一个单击事件       

            var event = new MouseEvent('click')

            // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称       

            a.download = name || '下载图片名称'       

            // 将生成的URL设置为a.href属性       

            a.href = url

            // 触发a的单击事件

            a.dispatchEvent(event)

        }

        image.src = document.querySelector(selector).src

    }

    downloadCanvasIamge('canvas', '图片名称')

使用方法2可能会出现 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present问题。

这个是由于new Image()中src问题导致，可通过canvas.toDataURL("image/png")先转译再处理。

 new Image().src = canvas.toDataURL("image/png");