js将div保存成图片并下载

梦里梦外; 2023-03-01 06:02 13阅读 0赞

经测试只在pc端能正常使用  
[插件下载][Link 1]  
html代码

<div class="haibao"> 
        <img src="__PUBLIC__/static/img/haibao.png" alt="">
        <div class="text">这是个不正经，有很正经的还海报</div>
        <div class="qrcode">
            <img src="__PUBLIC__/static/img/head.jpg" alt="">
            <div class="qrcode-text">
                <div>我猜你不敢微信扫码</div>
                <div>以为怕你无法自拔--_-||</div>
            </div>
        </div>
    </div>
    
    <div class="baocun-btn" onclick="baocun()">保存海报</div>
    
    <script src="__PUBLIC__/static/js/html2canvas.min.js"></script>

js代码

php代码

public function base(){ 
            $base64_image_content = input('img');
            $path = public_path().'uploads/qrcode';
            $s=str_replace('data:image/octet-stream;base64,', '', $base64_image_content);
            $type = 'png';
            $new_file = $path."/".date('Ymd',time())."/";
            if(!file_exists($new_file)){ 
                //检查是否有该文件夹，如果没有就创建，并给予最高权限
                mkdir($new_file, 0700, true);
            }
            $new_file = $new_file.time().".{ $type}";
            if (file_put_contents($new_file, base64_decode($s))){ 
                $url = Config::get('app.url').explode('\\public',$new_file)[1];
                return $url;
            }else{ 
                return false;
            }
        }

[Link 1]: https://download.csdn.net/download/weixin_41201496/12651016