javascript是有操作二进制文件的方法的,在这里就不详述了。

而AJAX的核心XMLHttpRequest也可以获取服务端给的二进制Blob。

可以参考:

XMLHttpRequest Level 2 使用指南

Blob - MDN

FileReader - MDN

代码还是基于上一篇文章的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的更多相关文章

  1. 【转载】C#.NET WebApi返回各种类型(图片/json数据/字符串),.net图片转二进制流或byte

    C#.NET WebApi返回各种类型(图片/json数据/字符串),.net图片转二进制流或byte 转载:http://www.itdos.com/Mvc/20150302/0741255.htm ...

  2. [.ashx檔?泛型处理程序?]基础入门#5....ADO.NET 与 将DB里面的二进制图片还原 (范例下载 & 大型控件的ImageField)

    [.ashx檔?泛型处理程序?]基础入门#5....ADO.NET 与 将DB里面的二进制图片还原 (范例下载 & 大型控件的ImageField) http://www.dotblogs.c ...

  3. Facebook存储技术方案:找出“暖性BLOB”数据

    Facebook公司已经在其近线存储体系当中彻底弃用RAID与复制机制,转而采用分布式擦除编码以隔离其所谓的“暖性BLOB”. 暖性?BLOB?这都是些什么东西?大家别急,马上为您讲解: BLOB—— ...

  4. 处理大数据对象clob数据和blob数据

    直接上下代码: package com.learn.jdbc.chap06; import java.io.File; import java.io.FileInputStream; import j ...

  5. 车标知识学习网页开发,与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#

    万法同源 一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书.技术的东西从来没人关注,扯东扯西的文章莫名的火.之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱 ...

  6. 二进制学习——Blob,ArrayBuffer、File、FileReader和FormData的区别

    前言: Blob.ArrayBuffer.File.fileReader.formData这些名词总是经常看到,知道一点又好像不知道,像是同一个东西好像又不是,总是模模糊糊,最近终于下决心要弄清楚. ...

  7. [.ashx檔?泛型处理例程?]基础入门#3....ADO.NET 与 将DB里面的二进制图片还原

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_03_db_picture_show.aspx ...

  8. BLOB二进制对象(blob.c/h)

    BLOB二进制对象(blob.c/h) 数据结构 struct blob_attr { uint32_t id_len; /** 高1位为extend标志,高7位存储id, * 低24位存储data的 ...

  9. 使用ADO实现BLOB数据的存取 -- ADO开发实践之二

    使用ADO实现BLOB数据的存取 -- ADO开发实践之二 http://www.360doc.com/content/11/0113/16/4780948_86256633.shtml 一.前言 在 ...

随机推荐

  1. 'ipconfig' 不是内部或外部命令,也不是可运行的程序 或批处理文件

    今天在学习的时候需要找本地ip地址,可是在命令行窗口却显示 百度之后发现原来是环境变量没配置的问题(其实之前是ok的,但应该是anconda安装的时候点了那个一键设置环境变量搞得本地的path里的数据 ...

  2. Jenkins中agent的使用

    [前言] 很多小伙伴都已经会搭建Jenkins环境了,都想要用Jenkins来运行自动化接口,可我们的Jenkins在linux服务器上.服务器上默认的python包是2.6的这样不是很好,那么这边就 ...

  3. docker部署dubbo怎么实现外部主机访问服务?

    dubbo在分布式项目中太常见了,docker也是现在热门的项目,然而docker的网络配置也是非常麻烦的一件事情,这里给大家介绍一下dubbo实现跨服务器访问服务配置 docker-compose. ...

  4. java 基本类型详解 及 常见问题

    鄙人不才,基础不好,趁着闲时简单学习一下,仅作学习分享,如有不正确地方还请各位看客不吝指出. 常用的基本类型有:byte(8).short(16).char(16,取值从0-65535[2^16-1] ...

  5. JavaWeb网上图书商城完整项目-数据库操作工具类

    1.首先安装数据库,在windows上安装和在unix上面安装环境不一样,我在自己的本地电脑上安装,安装成功之后,如果使用navicat远程工具访问,需要允许mysql远程能被访问 方法二.直接授权( ...

  6. android自定义控件onMeasure方法

    1.自定义控件首先定义一个类继承View 有时,Android系统控件无法满足我们的需求,因此有必要自定义View.具体方法参见官方开发文档:http://developer.android.com/ ...

  7. 在PHPstorm中使用数组短语法[],出现红色波浪

    在PHPstorm中使用数组短语法[],出现红色波浪 1. 在tp3.2.3项目中使用数组短语法[],报错如下错误: Short array syntax is allowed in PHP 5.4 ...

  8. JQ三种提示框:提示信息框、确认框、输入文本框

    浏览器的三种提示框: alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框 1.alert()提示信息框 效果: 实现代码: <script> alert ...

  9. java语言基础(五)_Scanner类_Random类_ArrayList类

    API API(Application Programming Interface),应用程序编程接口.Java API是一本程序员的字典 ,是JDK中提供给程序员使用的类的说明文档.这些类将底层的代 ...

  10. 关于ganymed-ssh2版本262和build210的SCPClient类的区别

    ganymed-ssh2是通过java使用ssh连接服务器的工具库,先上两个版本的pom文件配置: <!--ssh连接linux--> <!-- https://mvnreposit ...