如何使用 PHP vanilla 或 Laravel 从summernote 保存和更新图像答案

【问题标题】：How to save and update image(s) from summernote with PHP vanilla or Laravel如何使用 PHP vanilla 或 Laravel 从summernote 保存和更新图像
【发布时间】：2020-11-01 20:47:12
【问题描述】：

如何使用 PHP 保存和更新 Summernote 图像。

Summernote图片是base64的，所以需要先解码上传，然后用图片上传的目录修改summnernote内容的图片src数据，然后再将summernote内容保存到DB。因为不建议保存图像信息数据库。

当我将上传图片的相同路径目录img/location保存在数据库中时，当我尝试从数据库<textarea>{{$dbData->content}}</textarea>编辑summernote内容时，summernote无法显示图片

另外，您需要在解码之前检查 img src 是否真的是 base64 图像，因为在编辑已经保存的内容时，现有的 img src 不会是 base64 图像，除了新的由于现有的 img src 已解码并上传，因此尚未上传。

【问题讨论】：

标签： php laravel base64 summernote

【解决方案1】：

为避免错误的 HTML 格式引发错误，请使用 LIBXML_NOWARNING | LIBXML_NOERROR
在 img src 中检测 base64 图像的一种简单方法是检测字符串中的data:image。虽然不是最佳方式，但会解决问题。
最后，在被修改的 img src 前面加上正斜杠“/” 在summernote内容中将解决从数据库中获取结果后在summernote内容中不显示图像的问题

如果您有任何建议和最佳方法，请发表评论，我会很高兴。谢谢。代码（我的解决方案）

    //checking if request  is set
       if (isset($request->long_description)) {
        
        $detail=$request->long_description;
        
        //Prepare HTML & ignore HTML errors
        $dom = new \domdocument();
        $dom->loadHtml($detail, LIBXML_NOWARNING | LIBXML_NOERROR);

        //identify img element
        $images = $dom->getelementsbytagname('img');

         //loop over img elements, decode their base64 source data (src) and save them to folder,
        //and then replace base64 src with stored image URL.
        foreach($images as $k => $img){

            //collect img source data
            $data = $img->getattribute('src');

            //checking if img source data is image by detecting 'data:image' in string
            if (strpos($data, 'data:image')!==false){
            list($type, $data) = explode(';', $data);
            list(, $data)      = explode(',', $data);
            
            //decode base64
            $data = base64_decode($data);

            //naming image file
            $image_name= time().rand(000,999).$k.'.png';

            // image path (path) to use upload file to
            $path = 'img/location/'. $image_name;

            //image path (path2) to save to DB so that summernote can display image in edit mode (When editing summernote content) NB: the difference btwn path and path2 is the forward slash "/" in path2
            $path2 = '/img/location/'. $image_name;

            file_put_contents($path, $data);

            modify image source data in summernote content before upload to DB
            $img->removeattribute('src');
            $img->setattribute('src', $path2);
}

     else {
        // not base64 img

}
            
        }
        // final variable to store in DB
        $detail = $dom->savehtml();
       }

【讨论】：