首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从通过ajax发送的dataURI生成png-file

dataURI是一种将数据嵌入到URL中的方案,可以用来表示各种类型的数据,包括图像、音频、视频等。它的格式为"data:<mediatype>,<data>",其中<mediatype>表示数据的媒体类型,<data>表示实际的数据。

要从通过ajax发送的dataURI生成png文件,可以按照以下步骤进行操作:

  1. 解析dataURI:使用JavaScript的URL.createObjectURL()方法可以将dataURI转换为Blob对象。Blob对象是二进制数据的容器,可以用于创建文件。
  2. 创建canvas元素:使用JavaScript的document.createElement()方法创建一个canvas元素,用于绘制图像。
  3. 加载图像数据:使用JavaScript的Image对象加载dataURI中的图像数据。可以通过设置Image对象的src属性为dataURI来实现。
  4. 绘制图像:在canvas上使用JavaScript的2D绘图API,将加载的图像数据绘制到canvas上。
  5. 导出为png文件:使用JavaScript的canvas.toDataURL()方法将canvas上的图像数据导出为dataURI。将dataURI中的前缀"data:image/png;base64,"去除,得到纯粹的图像数据。
  6. 下载png文件:创建一个下载链接,设置其href属性为导出的png文件的dataURI,设置其download属性为文件名,然后使用JavaScript的click()方法触发下载。

以下是一个示例代码:

代码语言:javascript
复制
// 解析dataURI
function dataURItoBlob(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeString });
}

// 创建canvas元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// 加载图像数据
var img = new Image();
img.onload = function() {
  // 绘制图像
  ctx.drawImage(img, 0, 0);

  // 导出为png文件
  var pngDataURI = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '');

  // 下载png文件
  var link = document.createElement('a');
  link.href = 'data:application/octet-stream;base64,' + pngDataURI;
  link.download = 'image.png';
  link.click();
};

// 设置图像源
img.src = 'data:image/png;base64,iVBORw0KG...'; // 这里替换成实际的dataURI

推荐的腾讯云相关产品:腾讯云对象存储(COS)

  • 概念:腾讯云对象存储(COS)是一种高可用、高可靠、强安全的云端存储服务,可用于存储和处理各种类型的数据,包括图像、音频、视频等。
  • 分类:COS提供了多种存储类型,包括标准存储、低频存储、归档存储等,可以根据数据的访问频率和成本要求选择适合的存储类型。
  • 优势:COS具有高可用性、高可靠性、强安全性和灵活性的优势,可以满足各种规模和需求的存储需求。
  • 应用场景:COS可以应用于各种场景,如网站和应用程序的静态资源存储、大规模数据备份和归档、多媒体内容存储和分发等。
  • 产品介绍链接地址:腾讯云对象存储(COS)

注意:以上答案仅供参考,具体实现方式可能因具体情况而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 浏览器端用JS创建和下载文件

    浏览器端用JS创建和下载文件 1 需求 前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载...支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”) 2.2 生成文件:DataURI 用js将内容生成文件可以仿照图片...DataURI 的方式 封装成一个下载方法 function downloadFile(aLink, fileName...,可用浏览器新API(URL.createObjectURL)来解决,URL.createObjectURL 通常用来创建图片 DataURI 显示图片,这里用来下载文件,参数是 File对象(通过input...[type=file]选择的文件)或 Blob 对象(二进制大对象),让浏览器自动设定文件类型 解决类型限制:用 content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制

    4.8K120

    浏览器端用JS创建和下载文件

    浏览器端用JS创建和下载文件 1 需求 前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载...、firefox和opera支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”) 2.2 生成文件:DataURI 用...js将内容生成文件可以仿照图片 DataURI 的方式 封装成一个下载方法 function downloadFile...,可用浏览器新API(URL.createObjectURL)来解决,URL.createObjectURL 通常用来创建图片 DataURI 显示图片,这里用来下载文件,参数是 File对象(通过input...[type=file]选择的文件)或 Blob 对象(二进制大对象),让浏览器自动设定文件类型 解决类型限制:用 content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制

    17210

    浏览器端用JS创建和下载文件 【原创】

    :DataURI 3 改进方案 1 需求 前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载...支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”) 2.2 生成文件:DataURI 用js将内容生成文件可以仿照图片...DataURI 的方式 封装成一个下载方法 function downloadFile(aLink, fileName...,可用浏览器新API(URL.createObjectURL)来解决,URL.createObjectURL 通常用来创建图片 DataURI 显示图片,这里用来下载文件,参数是 File对象(通过input...[type=file]选择的文件)或 Blob 对象(二进制大对象),让浏览器自动设定文件类型 解决类型限制:用 content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制

    2.3K70

    Android邮件发送详解

    再通过Intent.EXTRA_SUBJECT和Intent.EXTRA_TEXT传递标题和文本的数据,记住,一定要使用这些常量,这是标准,否则Email客户端不认识,那样你传递的标题和文本就不起作用了...Email'客户端的发送Activity提供了两个Intent Filter,一个用于发送普通邮件,一个用户发送带有附件的邮件。...区分很很容易的,发送普通邮件的那个Intent Filter配置的Action SENDTO,而带有附件的邮件则是SEND,所以是2个不一样,但是哪些比如附加“标题”,“内容”,“抄送”,“发送多人”等等还是通用的...SENDTO发送普通邮件,SEND可以发送普通和带有附件的,不过最好主要用于发送附件。...Uri dataUri = intent.getData(); if (dataUri !

    1.1K20

    Android中我为什么发不了邮件--Android邮件发送详解

    在这里你可以学到: 什么是Intent和Intent Fileter 如何发送Email 如何发送特定的标题和内容的Emil 如何发送给多人 如何抄送和密送 如何发送附件 一:什么是Intent和Intent...Email 通过上面就会知道Android应用之间的通信是通过Intent这个东西,如果手机中有实现了你想要功能的应用那么你就不用麻烦去实现一个拉。...再通过Intent.EXTRA_SUBJECT和Intent.EXTRA_TEXT传递标题和文本的数据,记住,一定要使用这些常量,这是标准,否则Email客户端不认识,那样你传递的标题和文本就不起作用了...五,发送附件 Email’客户端的发送Activity提供了两个Intent Filter,一个用于发送普通邮件,一个用户发送带有附件的邮件。...Uri dataUri = intent.getData(); if (dataUri !

    91240

    iOS APP添加桌面快捷方式

    -> 从主屏幕点击刚刚添加到快捷功能,跳转到APP的对应界面。...准备 **第一步** 客户端:iOS 打开已有Xcode项目,选中Target,添加URL Scheme,这个URL Scheme是自己定义的,在这个地方定义了xxx之后,可以通过在浏览器中输入xxx:...DataURI的这种样式,生成方法可以参考下面的 "title"则是页面的标题 \(urlToRedirect.absoluteString)是定义好的URL Scheme链接 获取图片DataURI格式的数据...href中,然后再把之前网页再用mocky生成一个链接,在APP中使用openURL的方式打开最后生成的这个链接,运行,调试。...所以现在想要的是,在同一个页面上,从APP跳转的时候显示“引导添加到桌面”的样式,从桌面打开时显示“中间页”的样式。

    5.4K40

    用字母替代图片脚本:LetterAvatar

    基于canvas,通过toDataURL动态生成base64图片。...目前我主题的Gravatar头像,就是利用这个LetterAvatar脚本实现未设置Gravatar头像则读取ALT标签,自动生成首字图片替代默认的头像图片。...事件用自动生成的字母图片替换src图片地址,判断方式不是很合理,如果不是因为个缺点我都想直接拿来用了,如果作者再优化一下,绝对是款优秀实用的插件。...我的实现原理和插件不同,配合头像本地缓存功能,判断无头像后,直接为无头像的图片添加特定的class类,然后通过LetterAvatar脚本替换图片。...需要注意的是上面提到的插件,Gravatar头像图片必须有alt标签属性,否则不会生成正常的图片,可惜大部分主题默认Gravatar头像alt标签属性是空的.....

    46530

    ContentProvider初探

    使用系统提供的ContentProvider 其实很多时候我们用到ContentProvider并不是自己暴露自己的数据,更多的时候通过 ContentResolver来读取其他应用的信息,最常用的莫过于读取系统...; resolver.insert(uri, conValues); } 注意事项: 上述代码在4.4以下都可以实现写入短信的功能,而5.0上就无法写入,原因是: 从5.0开始,默认短信应用外的软件不能以写入短信数据库的形式发短信...接下来,创建一个新的项目,我们来实现ContentResolver的部分,我们直接通过按钮点击插入一条数据: MainActivity.java public class MainActivity extends...的db数据库取出,用图形查看工具 查看即可发现插入数据,时间关系,就不演示结果了~ 通过ContentObserver监听ContentProvider的数据变化 ?...的初探就到这里,我们学习了: ContentProvider的概念以及流程,使用系统提供的一些ContentProvider,以及定制自己的ContentProvider, 最后还讲解了通过ContentObserver

    53530

    Webpack 中使用source map 在开发过程中进行调试

    我们都知道webpack在打包的时候会将源代码打包成一个bundle文件,bundle文件就是经过了loader转换,还有webpack的一些插件处理,以及webpack构建过程中的一些转换,最后会生成一个大的...JS文件,直接去看这个文件是没法调试的。...source map是在开发过程中的一个利期,通过它我们在调试的时候可以定位到源代码,阮一峰老师的 JavaScript Source Map 详解写的比较详情细,大家可以去看看。...1. source map 关键字 1. eval:使⽤eval包裹模块代码; 2. source map:产⽣.map⽂件; 3.cheap:不包含列信息; 4. inline:将.map作为DataURI...嵌⼊,不单独⽣成.map⽂件; 5. module:包含loader的source map; 2. source map 类型 source map的类型是可以根据关键字进行一个排列组合得到不同的类型

    52730

    AJAX的基本原理及实例解析。

    responseText——从服务器进程返回数据的字符串形式。   responseXML——从服务器进程返回的DOM兼容的文档数据对象。   ...Ajax的核心就是是JavaScript对象XmlHttpRequest,这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。...请求发往服务器,服务器根据请求生成响应(Response),传回给XHR对象,在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充:   responseText——从服务器进程返回数据的字符串形式...responseXML——从服务器进程返回的DOM兼容的文档数据对象。   status——从服务器返回的数字代码,如404(未找到)和200(已就绪)。   ...通过 AJAX,JavaScript 无需等待服务器的响应,而是:   在等待服务器响应时执行其他脚本   当响应就绪后对响应进行处理   当使用 async=true 时,规定在响应处于 onreadystatechange

    96730
    领券