最近在做一个项目,需要实现类似QQ截图后,就是能够在富文本编辑器中粘贴截图并预览。

先看一下效果:

分析一下实现步骤:

  1. QQ截图后在编辑器中粘贴,肯定会有一个粘贴事件,即 paste 事件
  2. 在事件回调函数中对前端进行图片的一次压缩
  3. 前端压缩多是使用canvas,返回的是base64,这里我使用了一个 localResizeIMG.js的插件
  4. 将生成好的base64传给后台,后台可以进行图片的第二次压缩,但是感觉没必要
  5. 后台先得到七牛云的upToken,即一个上传的凭证,然后执行七牛sdk提供的上传函数

接下来,一步步的来实现:

浏览器paste事件

这个paste事件的兼容性不是很好,但是可以对用户做友好提示,如果不能使用剪切板事件的话,就在dialog中上传图片也是可以的。

当QQ截图之后,在富文本编辑器中右键黏贴或者CTRL V就会触发这个事件,这个事件有一个clipboardData属性,

这里面就是跟paste有关的数据了。详细知识可以看这一篇博文http://m.jb51.net/show/80657

我就直接复制粘贴一把梭了,>_>)

  1. function paste(event) {
  2. var clipboardData = event.clipboardData;
  3. var items, item, types;
  4. if (clipboardData) {
  5. items = clipboardD
  6. a//ta.items;
  7. if (!items) {
  8. return;
  9. }
  10. // 保存在剪贴板中的数据类型
  11. types = clipboardData.types || [];
  12. for (var i = 0; i < types.length; i++) {
  13. if (types[i] === 'Files') {
  14. item = items[i];
  15. break;
  16. }
  17. }
  18. // 判断是否为图片数据
  19. if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
  20. // 读取该图片
  21. var file = item.getAsFile(),
  22. reader = new FileReader();
  23. reader.readAsDataURL(file);
  24. reader.onload = function () {
  25. var image = reader.result;
  26. }
  27. }
  28. }
  29. }
  30. //绑定事件
  31. $('#editormd').on('paste', paste);

localResizeIMG.js的使用

这是一个前端压缩的插件,项目地址是https://github.com/think2011/localResizeIMG

兼容IE10以上,所以还得做个IE版本判断,然后看自己是否需要使用干这个插件,我这里就不写IE的判断了。

使用方法也很简单,lrz方法接受一个文件路径或者base64的图片,可以设置一个压缩宽度的对象,低于这个宽度的图片不会压缩,大于这个宽度的就会压缩,然后在then方法中取得压缩后的图片:

得先引入这个插件,可以使用src引入,也支持amd or cmd模块化

  1. <script src="./dist/lrz.bundle.js"></script>

接着开始使用:

  1. //image就是经过paste事件后得到的图片
  2. lrz(image, {width: 1080}).then(function (res) {
  3. var base64 = res.base64;
  4. }

七牛云sdk

七牛云注册好像就送10G的云储存,需要的可以去注册,先下载七牛云sdk,我使用的是php,地址https://developer.qiniu.com/kodo/sdk/php

配置这个上传的文件也很简单。将下载后的压缩包解压,删掉一下没用的文件,然后拖到项目中

uploadImageToQiliu.php:

  1. <?php
  2. require_once __DIR__ . '/../autoload.php';
  3. use Qiniu\Auth;
  4. // 引入上传类
  5. use Qiniu\Storage\UploadManager;
  6. $accessKey = '你的accessKey';
  7. $secretKey = '你的secretKey';
  8. // 初始化签权对象。
  9. $auth = new Auth($accessKey, $secretKey);
  10. $bucket = "空间名字";
  11. $upToken = $auth->uploadToken($bucket);
  12. // 初始化 UploadManager 对象并进行文件的上传。
  13. $uploadMgr = new UploadManager();
  14. $key = $_POST['name'];
  15. $filePath = $_POST['image'];
  16. list($ret, $err) = $uploadMgr->putFile($upToken, $key, $filePath);
  17. if ($err !== null) {
  18. echo json_encode($err);
  19. } else {
  20. echo json_encode($ret);
  21. }

accessKeysecretKey注册后就可以看到,bucket是云储存空间名字,下图的nuc-web-images

接下来是前台传图片和图片名给后台,图片名我就直接用 new Date().getTime()

  1. $.ajax({
  2. url: './apis/qiniu-sdk/myApis/uploadImageToQiliu.php',
  3. type: 'post',
  4. data: {
  5. "image": res.base64,
  6. "name": new Date().getTime()
  7. },
  8. contentType: 'application/x-www-form-urlencoded;charest=UTF-8',
  9. success: function (data) {
  10. var imageName;
  11. try {
  12. imageName = JSON.parse(data).key;
  13. } catch (e) {
  14. alert(e.toString);
  15. }
  16. var qiniuUrl = '![](http://omwtgu970.bkt.clouddn.com/' + imageName + ')';
  17. testEditor.insertValue(qiniuUrl);
  18. }
  19. })

testEditor 是我使用的markdown编辑器的对象实例,testEditor.insertValue(qiniuUrl);就是把格式化好的markdown语句插到光标处。

整个前端代码如下:

  1. function paste(event) {
  2. var clipboardData = event.clipboardData;
  3. var items, item, types;
  4. if (clipboardData) {
  5. items = clipboardData.items;
  6. if (!items) {
  7. return;
  8. }
  9. // 保存在剪贴板中的数据类型
  10. types = clipboardData.types || [];
  11. for (var i = 0; i < types.length; i++) {
  12. if (types[i] === 'Files') {
  13. item = items[i];
  14. break;
  15. }
  16. }
  17. // 判断是否为图片数据
  18. if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
  19. // 读取该图片
  20. var file = item.getAsFile(),
  21. reader = new FileReader();
  22. reader.readAsDataURL(file);
  23. reader.onload = function () {
  24. //前端压缩
  25. lrz(reader.result, {width: 1080}).then(function (res) {
  26. $.ajax({
  27. url: './apis/qiniu-sdk/myApis/uploadImageToQiliu.php',
  28. type: 'post',
  29. data: {
  30. "image": res.base64,
  31. "name": new Date().getTime()
  32. },
  33. contentType: 'application/x-www-form-urlencoded;charest=UTF-8',
  34. success: function (data) {
  35. var imageName;
  36. try {
  37. imageName = JSON.parse(data).key;
  38. } catch (e) {
  39. alert(e.toString);
  40. }
  41. var qiniuUrl = '![](http://omwtgu970.bkt.clouddn.com/' + imageName + ')';
  42. testEditor.insertValue(qiniuUrl);
  43. }
  44. })
  45. });
  46. }
  47. }
  48. }
  49. }
  50. $('#editormd').on('paste', paste);

另外这个markdown编辑器也是开源的,项目地址是:https://github.com/pandao/editor.md

markown编辑器截图粘贴预览,并将图片传至七牛云的更多相关文章

  1. Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等

    仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...

  2. 浅谈简单实现file控件的图片预览,裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...

  3. javascript实现 京东淘宝等商城的商品图片大图预览功能(图片放大器)

      在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出 ...

  4. Ubuntu下预览raw格式图片

    默认Ubuntu下资源管理器是不可以直接预览raw格式图片的,这就给查看图片带来很大的不便,下面我们就选择安装UFRaw来预览Raw格式图片 1. 首先在terminal安装UFRaw sudo ap ...

  5. 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片

    大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...

  6. 自己动手开发更好用的markdown编辑器-04(实时预览)

    这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/25/hexomd-04/   程序打包   文章目录 1. 打开新窗口 ...

  7. ubuntu自带的gedit编辑器添加Markdown预览插件

    gedit安装Markdown Preview Ubuntu自带的gedit编辑器也是有很强大的功能的,且支持插件的安装.对于喜欢用Markdown的我来说,这当然是很好的了,gedit本身 就支持M ...

  8. 为 Editor.md 编辑器插件增加预览和发布按钮

    前言 一直在使用 Editor.md 插件作为博客的编辑器,用着挺好,但是在全屏下编辑时,每次想预览或者保存又必须切换到非全屏状态下才可以点击按钮,用着不舒服,所以花了一点时间在工具栏上增加了预览.保 ...

  9. vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决:

    //预览<div class="htmlViewBox"> <p v-html="activity_html_defaultMsg" v-sh ...

随机推荐

  1. Redis系列四(keepalived+lvs搭建负载均衡)

    1.安装Keepalived(主备服务器都要安装) 10.8.80.218  主服务器 10.8.80.217  备服务器 10.8.80.200  虚拟IP $ wget http://www.ke ...

  2. [C#]为微软ASP.NET官方教学视频增加字幕

    前言 Microsoft Virtual Academy提供了学习ASP.NET的大量视频材料.(注1) 由于视频服务器位于海外,国内浏览速度并不理想,幸好官方提供了视频的下载地址以及英文字幕文件. ...

  3. 蓝桥网试题 java 基础练习 字符串对比

    -------------------------------------------------------------------------------- java有很多可以拿来用的方法为什么不 ...

  4. 内功心法 -- Java中的深拷贝和浅拷贝

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------这篇博客主要来谈谈" ...

  5. (译)AngularJS1.3.0 开发者指南(四) -- 控制器

    理解Controllers 在AngularJS中, Controller是一个Javascript构造函数, 常常被用来扩展 Angular Scope 对象. 控制器通过 ng-controlle ...

  6. 支撑Pinterest日均1000+次试验的A/B测试平台揭秘

    编者按:本文详细介绍了 Pinterest 内部A/B测试平台的搭建过程,对于无论是有技术能力和资源想要自建A/B测试系统的大公司,还是想在业务中引入第三方A/B测试方法和工具的中小公司都极具参考意义 ...

  7. git 打卡的第一天

    因为某种原因,所以不得不重新巩固下前端的基础知识,从最基本的学习还得额外的学习新知识,倍感压力之大. 昨天初略学习下git,算是自己学习的一个新知识.简单记录下,希望四海八荒的大神看过来,有错的请指导 ...

  8. esri-leaflet入门教程(4)-加载各类图层

    esri-leaflet入门教程(4)-加载各类图层 by 李远祥 在leaflet中图层一般分为底图(Basemap)和叠加图层(Overlay).前面章节已经介绍过底图其实也是实现了TileLay ...

  9. Frogs

    Problem Description There are m stones lying on a circle, and n frogs are jumping over them.The ston ...

  10. MSSQL数据批量插入优化详细

    序言 现在有一个需求是将10w条数据插入到MSSQL数据库中,表结构如下,你会怎么做,你感觉插入10W条数据插入到MSSQL如下的表中需要多久呢? 或者你的批量数据是如何插入的呢?我今天就此问题做个探 ...