首页 > 编程语言 >PHPCMS粘贴word图片且图片文件自动上传功能

PHPCMS粘贴word图片且图片文件自动上传功能

时间:2023-03-13 15:22:45浏览次数:47  
标签:word text base64 PHPCMS wordpaster items var 图片

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的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);

};

 

详细内容可参考这篇文章

详细思路及源码

示例下载:

wordpaster-vue3-cli-ueditor1.5wordpaster-vue-ueditor1.5wordpaster-asp.net-ueditor1.5xwordpaster-php-ueditor1xwordpaster-jsp-ueditor1x​

 

标签:word,text,base64,PHPCMS,wordpaster,items,var,图片
From: https://www.cnblogs.com/songsu/p/17211558.html

相关文章

  • 如何通过C#/VB.NET从PowerPoint文档中提取图片
    PowerPoint是用于制作幻灯片(演示文稿)的应用软件,每张幻灯片中都可以包含文字、图形、图形、表格、声音和影像等多种信息。有时候我们发现在PPT里面有一些精美的图片,或者其他......
  • ckeditor粘贴word文档图片的技术
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑......
  • 爬取百度图片
    importosimporttimefromfake_useragentimportUserAgentimportrequestsimportreimportuuidheaders={"User-agent":UserAgent().random,#随机生成一......
  • 【Java】图片压缩处理
    需求如下:一些图片太大了,手机拍摄上传的图片有5M大小,然后阅读的内容其实不需要特别高的分辨率1M以下的图片并不需要被压缩,压缩只是针对部分过大的图片处理 图片处理库:......
  • ChatGPT 辅助 stable-diffusion 生成图片描述 tag 话术
    将如下话术发给ChatGPT:请用尽量多的英文单词描述一幅画,描述词尽量丰富,每个单词之间用逗号分隔:一个XXX 如果回复的tag数量不够,则追加四个字:不够丰富 之后Chat......
  • 基于LAMP搭建WordPress博客
    1、安装Apache。1)执行如下命令,安装Apache服务及其扩展包。yum-yinstallhttpdmod_sslmod_perlmod_auth_mysql2)执行如下命令,查看Apache是否安装成功。httpd-v3......
  • python批量处理图片设置分辨率
    fromPILimportImageimportos#设置图片路径和分辨率input_path="input_folder"output_path="output_folder"resolution=(1280,720)#循环处理图片for......
  • python批量拼接word文件
    importosfromdocximportDocument#创建新的空文档merged_doc=Document()#循环遍历所有.docx文件并将其合并到新文档中forfilenameinos.listdir('.'):......
  • freemarker 通过ftl 导出word
    1:需要的jarfreemarker.jar  https://pan.baidu.com/s/105Ma9aVPha8YvlBkuuO4bA  提取码:b9k8或者<dependency><groupId>org.freemarker</groupId><artif......
  • 标签之图片
    标签之图片 网站中最多的元素网站中最多的元素毋庸置疑,一定是图片<img>标签定义HTML页面中的图像<imgsrc=""alt=""title=""width=""height="">注意事项<img......