淘宝天猫_460*460吊牌-诗艺

从事电商的小伙伴应该知道，淘宝天猫店铺，女装类目在发布产品的时候，需要上传一张吊牌图（如下图所示）

很多人应该都是PS一张一张P的，要对应货号，材质，这些信息，如果一张一张做，实在太繁琐，太乱，耽误时间……
于是，我有了一个想法：把这些货号材质等信息整理好，通过一个页面就能获得所有产品的吊牌图。

代码如下：

<script type="text/javascript" src="https://cjj.zone/xxx/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cjj.zone/xxx/html2canvas.min.js"></script>
	
<script>
    $(document).ready(function(){
        var w=$('.bg').first().width();
        var h=$('.bg').first().height();
        $('.O').each(function(idx,ele){
            var canvas2 = document.createElement("canvas");
            canvas2.width = w * 2;
            canvas2.height = h * 2;
            canvas2.style.width = w + "px";
            canvas2.style.height = h + "px";
            var context = canvas2.getContext("2d");
            context.scale(2, 2);
            html2canvas($(ele).find('.bg').first().get(0), { canvas:canvas2 }).then(function(canvas) {
            var image = canvas.toDataURL("image/jpeg");
            $(ele).find(".down").first().attr('href',image);
            });
        });
    });
    function draw_canvas(id,serial){
        var template=$("#template").html();
        template=template.replace('BOXID','bg'+id);
    
        $("#drawArea").append(template);
        initCanvasForDom(id,serial);
    }
    function initCanvasForDom(id,serial){
        var canvas2 = document.createElement("canvas");
        let _canvas = $('#bg'+id).find('.bg').first();
        var w = parseInt($('#bg'+id).width());
        var h = parseInt($('#bg'+id).height());
        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * 2;
        canvas2.height = h * 2;
        canvas2.style.width = w + "px";
        canvas2.style.height = h + "px";
        //可以按照自己的需求，对context的参数修改,translate指的是偏移量
        // var context = canvas.getContext("2d");
        // context.translate(0,0);
        var context = canvas2.getContext("2d");
        context.scale(2, 2);
        html2canvas(document.getElementById('bg'+id), { canvas: canvas2 }).then(function(canvas) {
            var image = canvas.toDataURL("image/jpeg");
            $("#bg"+id).find(".down").first().attr('href',image).attr('download',serial);
        });
    }
</script>

<style>
body{background-color:#a1afc9;}
*{margin:0;padding:0;}
canvas {margin-right:5px;} 

.O{height:500px;width:460px;float:left;margin:5px;}
.bg{background-color:#fff;height:450px;width:450px;padding:5px;}
.box{width:210px;height:450px;background-color:#ddd;border-radius:5px;margin:0 auto;}
h5{text-align:center;font-size:24px;line-height:100px;height:70px;margin:0 auto;font-family:宋体;}
ul{width:190px;height:430px;margin:10px;}
li{width:190px;list-style:none;font-family:宋体;font-size:12px;line-height:20px;}
.hh{border:2px solid  #f00;padding:2px;margin-left:-5px;width:150px;}
.jia{width:190px;list-style:none;font-family:宋体;font-size:12px;line-height:80px;height:80px;text-align:center;}
.down{width:460px;height:40px;background-color:#000;color:#FFFF00;line-height:40px;display:block;text-align:center;text-decoration:none;}
.down:hover{background-color:#21a675;color:#fff;}
</style>

下面是吊牌的内容，可以在表格里操作，会比较清晰方便；
表格弄好后，在表格里复制代码粘贴到代码文件里

<div class="O"><div class="bg"><div class="box"><div class="boxt"><h5><b>合格证</b></h5><ul><li>品名：真丝连衣裙</li><li>商标：壹型壹觅</li><li class="hh">货号：XK995-1</li><li>尺码：L（165/88A)</li><li>颜色：绿色乱花</li><li>面料：100%桑蚕丝</li><li>等级：一等品</li><li>检验员：08</li><li>安全技术类别：B类</li><li>执行标准：FZ/T 81004-2012</li><li>企业：杭州佐畔服饰有限公司</li><li>地址：浙江省杭州市拱墅区康贤路43号1幢526室</li><li>电话：18888888888</li><li>洗涤说明：见耐久度标签</li></ul></div></div></div><a class="down" download="XK995-1吊牌.jpg">下载↓</a></div>
<div class="O"><div class="bg"><div class="box"><div class="boxt"><h5><b>合格证</b></h5><ul><li>品名：真丝连衣裙</li><li>商标：壹型壹觅</li><li class="hh">货号：YXYM001</li><li>尺码：L（165/88A)</li><li>颜色：粉色</li><li>面料：100%桑蚕丝<br>里布：89.4%聚酯纤维10.6%氨纶</li><li>等级：一等品</li><li>检验员：08</li><li>安全技术类别：B类</li><li>执行标准：FZ/T 81004-2012</li><li>企业：杭州佐畔服饰有限公司</li><li>地址：浙江省杭州市拱墅区康贤路43号1幢526室</li><li>电话：18888888888</li><li>洗涤说明：见耐久度标签</li></ul></div></div></div><a class="down" download="YXYM001吊牌.jpg">下载↓</a></div>
<div class="O"><div class="bg"><div class="box"><div class="boxt"><h5><b>合格证</b></h5><ul><li>品名：真丝连衣裙</li><li>商标：壹型壹觅</li><li class="hh">货号：YXYM002</li><li>尺码：L（165/88A)</li><li>颜色：花色</li><li>面料：100%桑蚕丝<br>配料：100%桑蚕丝</li><li>等级：一等品</li><li>检验员：08</li><li>安全技术类别：B类</li><li>执行标准：FZ/T 81004-2012</li><li>企业：杭州佐畔服饰有限公司</li><li>地址：浙江省杭州市拱墅区康贤路43号1幢526室</li><li>电话：18888888888</li><li>洗涤说明：见耐久度标签</li></ul></div></div></div><a class="down" download="YXYM002吊牌.jpg">下载↓</a></div>
<div class="O"><div class="bg"><div class="box"><div class="boxt"><h5><b>合格证</b></h5><ul><li>品名：真丝连衣裙</li><li>商标：壹型壹觅</li><li class="hh">货号：YXYM003</li><li>尺码：L（165/88A)</li><li>颜色：花色</li><li>面料：100%桑蚕丝<br>配料：100%桑蚕丝</li><li>等级：一等品</li><li>检验员：08</li><li>安全技术类别：B类</li><li>执行标准：FZ/T 81004-2012</li><li>企业：杭州佐畔服饰有限公司</li><li>地址：浙江省杭州市拱墅区康贤路43号1幢526室</li><li>电话：18888888888</li><li>洗涤说明：见耐久度标签</li></ul></div></div></div><a class="down" download="YXYM003吊牌.jpg">下载↓</a></div>
<div class="O"><div class="bg"><div class="box"><div class="boxt"><h5><b>合格证</b></h5><ul><li>品名：真丝连衣裙</li><li>商标：壹型壹觅</li><li class="hh">货号：YXYM005</li><li>尺码：L（165/88A)</li><li>颜色：孔雀绿</li><li>面料：100%桑蚕丝<br>配料：100%桑蚕丝</li><li>等级：一等品</li><li>检验员：08</li><li>安全技术类别：B类</li><li>执行标准：FZ/T 81004-2012</li><li>企业：杭州佐畔服饰有限公司</li><li>地址：浙江省杭州市拱墅区康贤路43号1幢526室</li><li>电话：18888888888</li><li>洗涤说明：见耐久度标签</li></ul></div></div></div><a class="down" download="YXYM005吊牌.jpg">下载↓</a></div>
<div class="O"><div class="bg"><div class="box"><div class="boxt"><h5><b>合格证</b></h5><ul><li>品名：真丝连衣裙</li><li>商标：壹型壹觅</li><li class="hh">货号：YXYM006</li><li>尺码：L（165/88A)</li><li>颜色：草绿</li><li>面料：100%桑蚕丝</li><li>等级：一等品</li><li>检验员：08</li><li>安全技术类别：B类</li><li>执行标准：FZ/T 81004-2012</li><li>企业：杭州佐畔服饰有限公司</li><li>地址：浙江省杭州市拱墅区康贤路43号1幢526室</li><li>电话：18888888888</li><li>洗涤说明：见耐久度标签</li></ul></div></div></div><a class="down" download="YXYM006吊牌.jpg">下载↓</a></div>
<div class="O"><div class="bg"><div class="box"><div class="boxt"><h5><b>合格证</b></h5><ul><li>品名：真丝连衣裙</li><li>商标：壹型壹觅</li><li class="hh">货号：YXYM007</li><li>尺码：L（165/88A)</li><li>颜色：条纹色</li><li>面料：100%桑蚕丝<br>配料：100%桑蚕丝</li><li>等级：一等品</li><li>检验员：08</li><li>安全技术类别：B类</li><li>执行标准：FZ/T 81004-2012</li><li>企业：杭州佐畔服饰有限公司</li><li>地址：浙江省杭州市拱墅区康贤路43号1幢526室</li><li>电话：18888888888</li><li>洗涤说明：见耐久度标签</li></ul></div></div></div><a class="down" download="YXYM007吊牌.jpg">下载↓</a></div>
<div class="O"><div class="bg"><div class="box"><div class="boxt"><h5><b>合格证</b></h5><ul><li>品名：真丝连衣裙</li><li>商标：壹型壹觅</li><li class="hh">货号：YXYM008</li><li>尺码：L（165/88A)</li><li>颜色：蔷薇色</li><li>面料：100%桑蚕丝</li><li>等级：一等品</li><li>检验员：08</li><li>安全技术类别：B类</li><li>执行标准：FZ/T 81004-2012</li><li>企业：杭州佐畔服饰有限公司</li><li>地址：浙江省杭州市拱墅区康贤路43号1幢526室</li><li>电话：18888888888</li><li>洗涤说明：见耐久度标签</li></ul></div></div></div><a class="down" download="YXYM008吊牌.jpg">下载↓</a></div>
<div class="O"><div class="bg"><div class="box"><div class="boxt"><h5><b>合格证</b></h5><ul><li>品名：真丝连衣裙</li><li>商标：壹型壹觅</li><li class="hh">货号：YXYM009</li><li>尺码：L（165/88A)</li><li>颜色：黄橙色</li><li>面料：100%桑蚕丝<br>配料：100%桑蚕丝</li><li>等级：一等品</li><li>检验员：08</li><li>安全技术类别：B类</li><li>执行标准：FZ/T 81004-2012</li><li>企业：杭州佐畔服饰有限公司</li><li>地址：浙江省杭州市拱墅区康贤路43号1幢526室</li><li>电话：18888888888</li><li>洗涤说明：见耐久度标签</li></ul></div></div></div><a class="down" download="YXYM009吊牌.jpg">下载↓</a></div>

这里的内容可以用表格来梳理，更方便，更清晰（用Excel或者wps）
个人推荐用语雀

＞点这里可以查看我的表格

THE END

电商代码