插入数据库的时候进行替换即可，不同去翻源码
/**
 * [将文章里Base64图片转换为本地图片保存并返回文章内容]
 * @param  [pageContents] $pageContents [文章内容]
 * @param  [目录] $path [要保存的路径]
 */
function image_change($pageContents,$path){
  $pageContents = str_replace('\"','"',$pageContents);
  $reg = '/<img (.*?)+src=[\'"](.*?)[\'"]/i';
  preg_match_all( $reg , $pageContents , $results );
  $imgArray=$results[2];
  //打印出来
  for ($i=0; $i < count($imgArray); $i++) {
    $isBase64=base64_image_content($imgArray[$i],$path,$i);
    if($isBase64){
      $pageContents=str_replace($imgArray[$i],$isBase64,$pageContents);
    }
  }
  return $pageContents;
}


/**
 * [将Base64图片转换为本地图片并保存]
 * @param  [Base64] $base64_image_content [要保存的Base64]
 * @param  [目录] $path [要保存的路径]
 */
function base64_image_content($base64_image_content,$path,$Bin=0){
    //匹配出图片的格式
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
        $type = $result[2];
        $new_file = $path."/".date('Ymd',time())."/";
        if(!file_exists($new_file)){
            //检查是否有该文件夹，如果没有就创建，并给予最高权限
            mkdir($new_file, 0700);
        }
        $new_file = $new_file.date('YmdHis',time()). '_' . rand(10000, 99999).$Bin.".{$type}";
        if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
            return 'http://fh.online-game.com.cn/admin/'.$new_file;
        }else{
            return false;
        }
    }else{
        return false;
    }
}

  $content1=$_POST['content1'];
  $content1=image_change($content1,'images');

            最近在做商品详情的时候，有这样一个需求：用户可以使用富文本编辑器编辑商品，并且在小程序中可以展示。然鹅，小程序并不支持HTML标签，webview组件也只能加载URL,这就捉鸡了。
         最终决定采用将富文本内容转化为图片，后台保存转化后的图片与HTML内容，这样就可以实现在小程序中展示的富文本内容，同时又可以让用户随时修改商品介绍的内容了。
         这里我们用到的富文本编辑器插件为Simditor,选择它的原因很简单，风格和我们的整体风格符合。HTML转换图片采用html2canvas。贴一段项目的代码：
var editor = null;
function initSim(p) {
        editor = new Simditor({
        textarea:$("#designer"),
        toolbar:['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'],
        upload:{
            url:"文件上传地址",//这里我们修改了Simditor源码，符合我们项目的规则，
                        //Simditor貌似只生成对上传图片的引用的image,标签<img src="image ...data"，
                        //我们将其修改为我们上传图片的后台地址，已保证保存的HTML内容能复现我们图片内容
            fileKey:"file"
        }
    })
    var description = document.getElementById("description").innerHTML;
    console.log(description)
    editor.setValue(description);
}

function postDesigner() {
    var ele = document.querySelector(".simditor-body");//读取富文本编辑的内容
    html2canvas(ele).then(function(canvas){
        let img = canvas.toDataURL()
        let base = encodeURIComponent(img)
                //ajax上传文件，这里我们进行了URI编码，后台需要先进行URI解码
        $.ajax({
            type:'POST',
            url:"后台保存URL" ,
            data:{file:base},
            dataType:'json',
            success:function(res) {
                console.log(res)
                if(res.code == 0) {
                    $("#description_url").val(res.msg);
                    $("#desinForm").submit();
                }else {
                    alert("保存失败");
                }
            },
            error:function(err) {
                console.log(err);
                alert("保存失败")
            }
        })
    })
}
PHP代码
                $base64_img = urldecode(trim(input('file')));
        $up_dir = 'uploads/';
        if(!file_exists($up_dir)) {
            mkdir($up_dir,0777);
        }
        if(preg_match('/^(data:\s*image\/(\w+);base64,)/',$base64_img,$result)) {
            $type = $result[2];
            if(in_array($type,array('pjepg','jpeg','jpg','gif','bmp','png'))) {
                $saveName = $this->request->time().randomkeys(6).".".$type;
                if(file_put_contents($up_dir.$saveName,base64_decode(str_replace($result[1],'',$base64_img)))) {
                    return $this->ret->setCode(0)->setMsg($this->request->root().'/'.$up_dir.$saveName)->toJson();
                }else {
                    return $this->ret->setCode(1)->setMsg("文件上传失败")->toJson();
                }
            }else {
                return $this->ret->setCode(1)->setMsg("图片上传类型错误")->toJson();
            }
        }else {
            return $this->ret->setCode(1)->setMsg("文件错误")->toJson();
        }
转载于:https://blog.51cto.com/janwool/2154001

图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码

目前限chrome浏览器使用

首先以um-editor的二进制流保存为例：

打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。

加入下面的代码：

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况，做了如下的判断

//如下代码：e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的，同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理，如果只粘贴图片的话文本一定是空的，包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob, function( base64 ) {

              //sendAndInsertImage(base64,me); 上传到服务器

               setBase64Image(base64,me);

              });

              //阻止默认事件, 避免重复添加;

              e.originalEvent.preventDefault();

             };

        }

}

两个方法：

//执行插入图片的操作

function setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function  getBase64(blob, callback) {

    var a = new FileReader();

    a.onload = function(e) {callback(e.target.result);};

    a.readAsDataURL(blob);

};

效果展示：


详细内容可参考这篇文章：http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

讨论群：223813913

图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码

目前限chrome浏览器使用

首先以um-editor的二进制流保存为例：

打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。

加入下面的代码：

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况，做了如下的判断

//如下代码：e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的，同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理，如果只粘贴图片的话文本一定是空的，包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob, function( base64 ) {

              //sendAndInsertImage(base64,me); 上传到服务器

               setBase64Image(base64,me);

              });

              //阻止默认事件, 避免重复添加;

              e.originalEvent.preventDefault();

             };

        }

}

两个方法：

//执行插入图片的操作

function setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function  getBase64(blob, callback) {

    var a = new FileReader();

    a.onload = function(e) {callback(e.target.result);};

    a.readAsDataURL(blob);

};

效果展示：


详细内容可参考这篇文章：http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

讨论群：223813913