淘宝天猫_460*460吊牌

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

图片[1]-淘宝天猫_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
觉得有用就给点个赞呗
点赞15 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容