android canvas 网络图,【巨坑:toDataURL】canvas合成网络图片
不知有没有小伙伴用过canvas合成图片,然后爆炸
报错截图
尼玛,然后各种搜索,不外乎以下几种坑爹处理方案:
后端处理,比如Access-Control-Allow-Origin "*"(要是请求到其他网站的图片就不适用了,比如我要请求到微信的图片)
前端处理,比如img.setAttribute('crossOrigin', 'anonymous');
试了下,尼玛还是报错,折腾个半天过去了,下班了,一大早上的在群里问了下,有个大神说和跨域没关系吧 你本地不好测 测试环境可以的
抱着试一试的态度,丢到服务器上,一访问,尼玛,竟然不报错了,我真的是RI
效果图
效果图
示例代码
canvas合成网络图片
#h {
text-align: center;
}
#h canvas {
border-radius: 10px;
}
$(function () {
var bg = {
width: 340,
height: 500,
src: "https://oimageb5.ydstatic.com/image?id=3493803499422546314&product=adpublish&w=1280&h=720&sc=0&rm=2&gsb=0&gsbd=60"
}
var code = {
width: 100,
height: 100,
src: "./images/kf.jpg"
}
var userInfo = {
name: "嘉成大叔",
width: 170,
height: 170,
src: "http://thirdwx.qlogo.cn/mmopen/BEMV4WOAicktAAllnv9FdJFSU7QYVibMU62ctg7Ie5HiaCuDVCyiapibwrs48N97yrzLel03FvOUqAHEZGfBY5tCdnuHKEg4YvZSC/132"
}
var image = new Image();
var image1 = new Image();
var image2 = new Image();
image.src = bg.src;
image1.src = code.src;
image2.src = userInfo.src;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
image.onload = function () {
ctx.drawImage(image, 0, 0, bg.width, bg.height);
ctx.drawImage(image1, 250, 100, code.width, code.height);
ctx.save();
ctx.arc(185, 200, 65, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage(image2, 80, 80, userInfo.width, userInfo.height); // 在刚刚裁剪的园上画图
ctx.restore(); // 还原状态
ctx.font = "36px Georgia";
ctx.fillStyle = '#ffffff';
ctx.fillText(userInfo.name, 270, 250);
var mainImg = new Image();
var imgSrc = canvas.toDataURL('image/png')
mainImg.src = imgSrc;
$('#h').html("");//移除已生成的避免重复生成
$('#h').append(mainImg);
}
})
android canvas 网络图,【巨坑:toDataURL】canvas合成网络图片相关推荐
- android getpixel函数,关于Graphics.Blit函数在android上的巨坑
五月 13.2019. 0 Comment 在XR相关的app中经常会使用Camera,一般AR app都会使用AR 引擎自带的ARCamera,缺点是启动比较慢,定制型比较差,无法选择分辨率等:其他 ...
- android canvas画图gc,自定义控件绘图(Canvas,Paint,Region等)篇一
参考: 关于绘图相关的 Paint.Canvas多少都接触过一些,但没有系统的学习过,每次都是边查边用,这里都是参考大神的博客而成的学习记录,(采用Kotlin语言,来编写,kotlin确实有些坑,但 ...
- Android 高级UI解密 (三) :Canvas裁剪 与 二维、三维Camera几何变换(图层Layer原理)
Android的绘图机制是核心内容之一,无论是什么样的功能最终都是以图像的形式呈现给用户.因此掌握Android的绘图技巧,有助于Android理解层次的提高,在面对产品经理提出的idea时也更有底气 ...
- 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,...
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
- 【走过巨坑】android studio对于jni调用及运行闪退无法加载库的问题解决方案
[走过巨坑]android studio对于jni调用及运行闪退无法加载库的问题解决方案 参考文章: (1)[走过巨坑]android studio对于jni调用及运行闪退无法加载库的问题解决方案 ( ...
- [转]通过创建一个位图的XY Chart来学习Android绘图类Rect,Paint,Bitmap,Canvas(附源码)...
本文转自:http://www.cnblogs.com/salam/archive/2010/11/10/1873437.html 绘制一个XY集是一种很常见的任务,基于Android平台的绘制很简单 ...
- 做移动端电子签名发现canvas的 一些坑
做移动端收集电子签名项目的时候发现了一些坑: 1. 移动端的手指按下.移动.抬起事件跟PC端的鼠标按下.移动.弹起事件是不一样的 2. canvas它的属性宽高和样式宽高是不一样的,通过CSS来设置c ...
- Android如何动态更换桌面图标(巨坑)
转载https://blog.csdn.net/pangjl1982/article/details/83308512 1.Android如何动态更换桌面图标 1.1使用场景 APP,在中 ...
- Android画布画圆,android_studio的canvas画圆
1.怎样设置代码 package com.example.rk1130; import android.content.Context; import android.graphics.Canvas; ...
最新文章
- C++中的4个类型转换关键字
- Windows 编程
- 一文带你读懂base64编码
- dubbo和zookeper使用_Dubbox与Zookeeper简介及入门小案例
- 面向对象基础实战——飞机大战
- 智能人体感应灯,微波雷达存在感应,智能照明技术方案
- 五. 服务的注册 DiscoveryClient 与 ServiceRegistry 服务的发现的简单介绍
- 微信朋友圈+html+字体颜色,改变微信聊天字体颜色的方法?
- 微信多订单合并付款_微信小商店订单合并打单,操作分享请收藏!
- 支付宝与微信对账文件解析
- 异性相处,关系再好,也要懂得这些“分寸”
- c语言动态分配内存keil,keil5中结构体分配内存问题
- 蓝桥杯学习记录-基础练习
- 漫画绘制技法大放送(上)
- 局部色调映射(Local Tone Mapping)
- 总结输入法挡住输入框方案
- 聊一聊Niche站外链策略和PBN
- GitHub标星7000+,快速恢复像素化图像,效果惊人
- 德国著名的五位数学家
- 鸿蒙版的京东APP,再见安卓!鸿蒙版京东App上架华为商城:正式版最快6月见
热门文章
- IDEA 热部署 仅支持jdk1.6,1.7
- 老web换新枝----Sails.js移动设备的全新生产力(五)
- JSF 2.0/2.1 生命周期简介
- sqlite简单介绍
- dataset.xsd的定义(vs2008)
- 数据质量提升_合作提高数据质量
- 743. 网络延迟时间
- leetcode 509. 斐波那契数(dfs)
- 机械制图国家标准的绘图模板_如何使用p5js构建绘图应用
- 阿里的技术愿景_技术技能的另一面:领域知识和长期愿景