js实现DOM生成图片

最近在做项目的时候，考虑到公司之后有个需求，就是在PC端将页面的部分区域生成图片的 *** 作。那么在这里我就利用端午假期实现了下dom生成图片😃

DOM生成图片主要的思路就是：

获取dom元素将dom元素内所有图片转为base64将dom转换成svg，主要用到 foreignObject 标签将svg转换成base64利用a标签实现下载 

那么有了思路，根据思路先写出对应的方法：

方法1：将图片路径转换base64方法2：处理所有dom元素内的img标签转换为base64方法3：生成a标签实现下载

 下面直接展示代码：

样式写成行内样式，比如vue有作用域的关系可能会存在些问题

    
    
    
    


    
        
        
        
            Hello 略略大魔王！！！
        
    


    

这里用的图片路径不知道多久会过期，我这里是搞得临时图片路径

https://www.imgurl.org/  在这个网站生成的，可以根据需求自己调整😋