二进制图片blob数据转canvas
javascript是有操作二进制文件的方法的,在这里就不详述了。
而AJAX的核心XMLHttpRequest也可以获取服务端给的二进制Blob。
可以参考:
代码还是基于上一篇文章的demo。二进制就用canvas转的blob数据模拟一下。
思路很简单,blob转image,image再转canvas。(image是base64的)
$("#getCroppedCanvas").on("click", function () {
console.log($('#image').cropper('getCroppedCanvas'));;
var cas=$('#image').cropper('getCroppedCanvas');
var base64url=cas.toDataURL('image/jpeg'); // new
cas.toBlob(function (e) {
console.log(e); //生成Blob的图片格式
const reader = new FileReader()
reader.readAsDataURL(e)
reader.onload = function(e){
console.log("reader")
console.log(e.target.result)
let img = new Image()
img.src = e.target.result
img.id = "abc"
img.style.display = "none"
document.body.appendChild(img)
img.onload = function () {
console.log("img")
// console.log(this)
console.log(this.width)
console.log(this.height)
console.log(this.naturalWidth)
console.log(this.naturalHeight)
let canvas = document.createElement("canvas")
canvas.width = this.width
canvas.height = this.height
let ctx = canvas.getContext("2d")
ctx.drawImage(this, 0, 0)
document.body.removeChild(img)
document.body.appendChild(canvas)
}
}
})
})
注意//new注释下面的部分。
这段代码有三层回调:canvas.toBlob()、new FileReader().onload()、image.onload()。
image回调的目的是获取图片正确的宽高,赋值给canvas。canvas有默认宽高,放着不管的话会拉伸图片。
值得注意的是:CanvasRenderingContext2D.drawImage()方法的第一个参数是不支持base64图片流的,这一点MDN的文档说明了。
image 绘制到上下文的元素。
允许任何的 canvas 图像源(CanvasImageSource),例如:CSSImageValue,HTMLImageElement,SVGImageElement,HTMLVideoElement,HTMLCanvasElement,ImageBitmap 或者OffscreenCanvas。
——CanvasRenderingContext2D.drawImage() - MDN
参考:CanvasRenderingContext2D.drawImage() - MDN
最后, CanvasRenderingContext2D.drawImage()方法 其实隐藏着一个大坑:使用不同的参数,参数的顺序是不一样的。
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
我曾经被这个方法折腾的百思不得其解,看了MDN注意到这个坑爹的细节。
以上。
二进制图片blob数据转canvas的更多相关文章
- 【转载】C#.NET WebApi返回各种类型(图片/json数据/字符串),.net图片转二进制流或byte
C#.NET WebApi返回各种类型(图片/json数据/字符串),.net图片转二进制流或byte 转载:http://www.itdos.com/Mvc/20150302/0741255.htm ...
- [.ashx檔?泛型处理程序?]基础入门#5....ADO.NET 与 将DB里面的二进制图片还原 (范例下载 & 大型控件的ImageField)
[.ashx檔?泛型处理程序?]基础入门#5....ADO.NET 与 将DB里面的二进制图片还原 (范例下载 & 大型控件的ImageField) http://www.dotblogs.c ...
- Facebook存储技术方案:找出“暖性BLOB”数据
Facebook公司已经在其近线存储体系当中彻底弃用RAID与复制机制,转而采用分布式擦除编码以隔离其所谓的“暖性BLOB”. 暖性?BLOB?这都是些什么东西?大家别急,马上为您讲解: BLOB—— ...
- 处理大数据对象clob数据和blob数据
直接上下代码: package com.learn.jdbc.chap06; import java.io.File; import java.io.FileInputStream; import j ...
- 车标知识学习网页开发,与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#
万法同源 一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书.技术的东西从来没人关注,扯东扯西的文章莫名的火.之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱 ...
- 二进制学习——Blob,ArrayBuffer、File、FileReader和FormData的区别
前言: Blob.ArrayBuffer.File.fileReader.formData这些名词总是经常看到,知道一点又好像不知道,像是同一个东西好像又不是,总是模模糊糊,最近终于下决心要弄清楚. ...
- [.ashx檔?泛型处理例程?]基础入门#3....ADO.NET 与 将DB里面的二进制图片还原
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_03_db_picture_show.aspx ...
- BLOB二进制对象(blob.c/h)
BLOB二进制对象(blob.c/h) 数据结构 struct blob_attr { uint32_t id_len; /** 高1位为extend标志,高7位存储id, * 低24位存储data的 ...
- 使用ADO实现BLOB数据的存取 -- ADO开发实践之二
使用ADO实现BLOB数据的存取 -- ADO开发实践之二 http://www.360doc.com/content/11/0113/16/4780948_86256633.shtml 一.前言 在 ...
随机推荐
- 'ipconfig' 不是内部或外部命令,也不是可运行的程序 或批处理文件
今天在学习的时候需要找本地ip地址,可是在命令行窗口却显示 百度之后发现原来是环境变量没配置的问题(其实之前是ok的,但应该是anconda安装的时候点了那个一键设置环境变量搞得本地的path里的数据 ...
- Jenkins中agent的使用
[前言] 很多小伙伴都已经会搭建Jenkins环境了,都想要用Jenkins来运行自动化接口,可我们的Jenkins在linux服务器上.服务器上默认的python包是2.6的这样不是很好,那么这边就 ...
- docker部署dubbo怎么实现外部主机访问服务?
dubbo在分布式项目中太常见了,docker也是现在热门的项目,然而docker的网络配置也是非常麻烦的一件事情,这里给大家介绍一下dubbo实现跨服务器访问服务配置 docker-compose. ...
- java 基本类型详解 及 常见问题
鄙人不才,基础不好,趁着闲时简单学习一下,仅作学习分享,如有不正确地方还请各位看客不吝指出. 常用的基本类型有:byte(8).short(16).char(16,取值从0-65535[2^16-1] ...
- JavaWeb网上图书商城完整项目-数据库操作工具类
1.首先安装数据库,在windows上安装和在unix上面安装环境不一样,我在自己的本地电脑上安装,安装成功之后,如果使用navicat远程工具访问,需要允许mysql远程能被访问 方法二.直接授权( ...
- android自定义控件onMeasure方法
1.自定义控件首先定义一个类继承View 有时,Android系统控件无法满足我们的需求,因此有必要自定义View.具体方法参见官方开发文档:http://developer.android.com/ ...
- 在PHPstorm中使用数组短语法[],出现红色波浪
在PHPstorm中使用数组短语法[],出现红色波浪 1. 在tp3.2.3项目中使用数组短语法[],报错如下错误: Short array syntax is allowed in PHP 5.4 ...
- JQ三种提示框:提示信息框、确认框、输入文本框
浏览器的三种提示框: alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框 1.alert()提示信息框 效果: 实现代码: <script> alert ...
- java语言基础(五)_Scanner类_Random类_ArrayList类
API API(Application Programming Interface),应用程序编程接口.Java API是一本程序员的字典 ,是JDK中提供给程序员使用的类的说明文档.这些类将底层的代 ...
- 关于ganymed-ssh2版本262和build210的SCPClient类的区别
ganymed-ssh2是通过java使用ssh连接服务器的工具库,先上两个版本的pom文件配置: <!--ssh连接linux--> <!-- https://mvnreposit ...