電商谷歌插件阿里巴巴的主圖下載

本文轉載自查看原文 2020-10-13 10:42 604 52 電商

背景

昨天有一個朋友問我有阿里巴巴主圖下載的工具沒，百度了一下，找到了一些winform的程序，那個太麻煩了感覺，還要登錄賬戶，不安全。
今天有空，就寫了一個谷歌游覽器插件，開源，安全，源碼在后面會貼出來。

注意事項

下載圖片的分辨率是自己設定的，現在是在代碼里寫死的，這個以后空了優化一下
默認下載圖片的分辨率是800x800
因為是多圖下載，谷歌游覽器一般會有一個提示，是否允許下載多個文件之類的，允許就可以了
如果要改下載圖片的分辨率，用記事本打開content-script.js這個文件，把里面的800x800換成自己的分辨率即可，如：1080x1080
圖片分辨率超過了本身的大小，好像是不能下載的哦，注意！！！
1688不知道是阿里做的屁，還是怎么樣，反正很卡很卡，是網站本身的問題，跟插件無關

核心源碼

//參考：
//https://blog.csdn.net/weixin_42193179/article/details/88917836
//https://www.cnblogs.com/songsu/p/13328039.html
//https://www.cnblogs.com/billyrun/articles/12054937.html


function downloadIamge(imgsrc, name) {//下載圖片地址和圖片名
    var image = new Image();
    image.setAttribute("crossOrigin", "anonymous");// 解決跨域 Canvas 污染問題
    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"); //得到圖片的base64編碼數據
        var a = document.createElement("a"); // 生成一個a元素
        var event = new MouseEvent("click"); // 創建一個單擊事件
        a.download = name || "photo"; // 設置圖片名稱
        a.href = url; // 將生成的URL設置為a.href屬性
        a.dispatchEvent(event); // 觸發a的單擊事件
    };
    image.src = imgsrc;
}


// 獲取圖片 並 下載
var getImgs = function () {
    $("#dt-tab div.tab-content-container ul li").each(function () {

        var url = $(this).find("img").eq(0).attr("src");
        if (url == "https://cbu01.alicdn.com/cms/upload/other/lazyload.png") {

        } else {
            url = url.replace('60x60', "800x800");// 下載大圖 分辨率可自定義 超出圖片的真實大小后不能下載哦 注意！！！

            var ext = ".png";// 擴展名
            var pos = url.lastIndexOf(".");
            if (pos != -1) {
                ext = url.substr(pos);
            }
            var index = $(this).index() + 1;// 當前圖片的索引
            var name = "img" + index + ".png";// 圖片的名稱

            downloadIamge(url, name);
        }
    });
};