百度360必应搜狗淘宝本站头条
wireshark怎么抓包c++ base64for_eachwxsqlite3qt sleep
当前位置：网站首页 > 技术分析 > 正文

让编辑器支持word的复制黏贴,支持截屏的黏贴

liebian365 2024-10-22 15:41 27 浏览 0 评论

chrome有很多人性化的API，比如拖拽， 比如图片可以转化为base64等；

比如知乎上面的回复中可以直接黏贴图片， 就不需要手动点击图片上传按钮， 选择图片， 确认上传等等； 知乎参考地址：打开

让编辑器支持word的复制黏贴， 其中图片会转化为base64编码， 如果是通过远程打开这个静态页， 黏贴word文档的时候， 图片不会黏贴进来， 因为远程地址无法访问本地磁盘的绝对路径， 如果把下面代码保存成静态界面打开， 那么word中的图片都可以看见， 而且都会被转化为base64编码；

编辑器支持截屏的黏贴；

让编辑器支持图片直接拖拽， 直接拖拽即可添加图片， 功能更加强大， 而且图片也是base64编码；

使用的话这new Edit， 参数为一个可编辑的元素， 比如有contenteditable属性的div或者iframe元素等:

<html>
    <head></head>
    <body>
    <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>

        <div id="edit" contenteditable="true" style="width:400px;height:400px;border:1px solid #f00">

        </div>

    <script>
        function Edit( editEl ) {
 editEl = $(editEl);

 $(editEl).bind("paste", clipFn);

 function clipFn(ev) {

 //把剪贴板中的img通过canvas中专为base64字符串;
 var canvas = document.createElement("canvas");
 var context = canvas.getContext("2d");

 //从word拷贝时候会得到text/html数据;
 var html = $(ev.originalEvent.clipboardData.getData("text/html"));
 html.find("img").each(function  {

 var img = document.createElement("img");
 var src = $(this).attr("src"); //.replace(/\\/gi,"\/");
 var _this = this;
 img.src = src;

 img.onload = function  {
 canvas.width = img.width;
 canvas.height = img.height;
 context.drawImage(img, 0, 0, img.width, img.height);
 var dataBase64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
 $("img").each(function (index, el) {
 //匹配图片;
 if ($(this).attr("src").replace(/[\/\\]/g,"") ===  src.replace(/[\/\\]/g,"")) {
 el.src = dataBase64;
 };
 });

 img.onerror = function {
 console.log("图片加载失败");
 };

 img.onload = null;
 };

 });

 //如果通过截图或者复制图片的方式会得到  type为"imgage"的图片;
 var ele = ev.originalEvent.clipboardData.items;
 for (var i = 0; i < ele.length; ++i) {
 if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {

 var blob = ele[i].getAsFile;
 readBlobAsDataURL(blob, function( base64 ) {

 var img= document.createElement('img');
 img.setAttribute('src', base64);

 editEl.append(img);;
 });
 //阻止默认事件, 避免重复添加;
 ev.originalEvent.preventDefault;
 };
 };
 };

 //绑定拖拽事件
 //要给个响应
 editEl.bind("dragover", function {
 return false;
 });

 //触发事件的响应
 editEl.bind("drop", function(ev) {
 loadImage( ev.originalEvent.dataTransfer.files[0] , function( result ) {
 editEl.append( "<img src="+result+" />" );
 });
 return false;
 });

 // 加载 图像文件(url路径)
 function loadImage(src, callback){
 // 过滤掉 非 image 类型的文件
 if(!src.type.match(/image.*/)){
 if(window.console){
 console.log("选择的文件类型不是图片: ", src.type);
 } else {
 window.confirm("只能选择图片文件");
 }
 return;
 }

 // 创建 FileReader 对象 并调用 render 函数来完成渲染.
 var reader = new FileReader;
 // 绑定load事件自动回调函数
 reader.onload = function(e){
 // 调用前面的 render 函数
 callback(e.target.result);
 };
 // 读取文件内容
 reader.readAsDataURL(src);
 };

 function readBlobAsDataURL(blob, callback) {
 var a = new FileReader;
 a.onload = function(e) {callback(e.target.result);};
 a.readAsDataURL(blob);
 };
        };
    </script>
    
    <script>
        new Edit("#edit");
    </script>
    </body>
</html>

很多网上的编辑器里 对图片的支持单一， 都会考虑IE6， IE7， ff， chrome， 各种兼容问题；

这个解决方案适合基于chrome内核的浏览器, FF的兼容没有处理， 因为所有的图片数据都是基于base64， 图片就没有上传这一说法了，图片都变成了字符串， 不过这个有个劣势就是每一次提交的数据都会比较大；

相关推荐

“版本末期”了?下周平衡补丁!国服最强5套牌!上分首选

明天，酒馆战棋就将迎来大更新，也聊了很多天战棋相关的内容了，趁此机会，给兄弟们穿插一篇构筑模式的卡组推荐！老规矩，我们先来看10职业胜率。目前10职业胜率排名与一周前基本类似，没有太多的变化。平衡补丁...

VS2017 C++ 程序报错“error C2065:“M_PI”: 未声明的标识符&quot;

首先，程序中头文件的选择，要选择头文件，在文件中是没有对M_PI的定义的。选择：项目——>”XXX属性"——>配置属性——>C/C++——>预处理器——>预处理器定义，...

东营交警实名曝光一批酒驾人员名单 88人受处罚

齐鲁网·闪电新闻5月24日讯酒后驾驶是对自己和他人生命安全极不负责的行为，为守护大家的平安出行路，东营交警一直将酒驾作为重点打击对象。5月23日，东营交警公布最新一批饮酒、醉酒名单。对以下驾驶人醉酒...

Qt界面——搭配QCustomPlot（qt platform）

这是我第一个使用QCustomPlot控件的上位机，通过串口精确的5ms发送一次数据，再将读取的数据绘制到图表中。界面方面，尝试卡片式设计，外加QSS简单的配了个色。QCustomPlot官网：Qt...

大话西游2分享赢取种族坐骑手办!PK趣闻录由你书写

老友相聚，仗剑江湖！《大话西游2》2021全民PK季4月激燃打响，各PK玩法鏖战齐开，零门槛参与热情高涨。PK季期间，不仅各种玩法奖励丰厚，参与PK趣闻录活动，投稿自己在PK季遇到的趣事，还有机会带走...

测试谷歌VS Code AI 编程插件 Gemini Code Assist

用ClaudeSonnet3.7的天气测试编码，让谷歌VSCodeAI编程插件GeminiCodeAssist自动编程。生成的文件在浏览器中的效果如下：（附源代码）VSCode...

顾爷想知道第4.5期 国服便利性到底需优化啥?

前段时间DNF国服推出了名为“阿拉德B计划”的系列改版计划，截至目前我们已经看到了两项实装。不过关于便利性上，国服似乎还有很多路要走。自从顾爷回归DNF以来，几乎每天都在跟我抱怨关于DNF里面各种各样...

掌握Visual Studio项目配置【基础篇】

1.前言VisualStudio是Windows上最常用的C++集成开发环境之一，简称VS。VS功能十分强大，对应的，其配置系统较为复杂。不管是对于初学者还是有一定开发经验的开发者来说，捋清楚VS...

还嫌LED驱动设计套路深?那就来看看这篇文章吧

随着LED在各个领域的不同应用需求,LED驱动电路也在不断进步和发展。本文从LED的特性入手，推导出适合LED的电源驱动类型，再进一步介绍各类LED驱动设计。设计必读：LED四个关键特性特性一：非线...

Visual Studio Community 2022(VS2022)安装图文方法

直接上步骤：1，首先可以下载安装一个VisualStudio安装器，叫做VisualStudioinstaller。这个安装文件很小，很快就安装完成了。2，打开VisualStudioins...

Qt添加MSVC构建套件的方法（qt添加c++11）

前言有些时候，在Windows下因为某些需求需要使用MSVC编译器对程序进行编译，假设我们安装Qt的时候又只是安装了MingW构建套件，那么此时我们该如何给现有的Qt添加一个MSVC构建套件呢？本文以...

Qt为什么站稳c++GUI的top1（qt c）

为什么现在QT越来越成为c++界面编程的第一选择，从事QT编程多年，在这之前做C++界面都是基于MFC。当时为什么会从MFC转到QT？主要原因是MFC开发界面想做得好看一些十分困难，引用第三方基于MF...

qt开发IDE应该选择VS还是qt creator

如果一个公司选择了qt来开发自己的产品，在面临IDE的选择时会出现vs或者qtcreator，选择qt的IDE需要结合产品需求、部署平台、项目定位、程序猿本身和公司战略，因为大的软件产品需要明确IDE...

Qt 5.14.2超详细安装教程，不会来打我

Qt简介Qt（官方发音[kju:t]，音同cute）是一个跨平台的C++开库，主要用来开发图形用户界面（GraphicalUserInterface，GUI）程序。Qt是纯C++开...

Cygwin配置与使用(四)——VI字体和颜色的配置

简介：VI的操作模式，基本上VI可以分为三种状态，分别是命令模式（commandmode）、插入模式（Insertmode）和底行模式（lastlinemode），各模式的功能区分如下：1)...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.