纯javaScript div保存图片并下载 js+Canvas+Svg

最精简的原生js开发,更方便扩展开发需要的业务

 

技术逻辑:

1.将div转为svg网络图片

2.将创建Canvas画布

3.将画布大小和div大小设置一样大

4.将svg img 画到Canvas的画布中 用方法  context.drawImage(img, 0, 0);

5.将Canvas画布保存为png图像

 

示例程序截图:

纯javaScript div保存图片并下载 js+Canvas+Svg_第1张图片

 

CODE:



    

Input Div:


    

        

Just have a TRY


        

By Dion


        

            

                

                    

                        

                            这是图片5


                        这是图片4
                    

                    这是图片3
                

                这是图片2
            

            这是图片1
        

    

    

Output Image:


    
    
    

    

你可能感兴趣的:(纯javaScript div保存图片并下载 js+Canvas+Svg)