移动端canvas文字图片合成并生成图片（canvas宽度自适应移动端屏幕）
这是我之前做的一个关于文字图片合成的代码，供大家参考，不足支出还望体谅；具体的注释在代码里都有，有什么不懂了可以留言互相交流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<title>元宵节祝福神器</title>
<style>
html,body,h2,p,ul,li,input,img,div,button,section,header,footer,canvas{margin:0;padding: 0; }
body{font:0.14rem "楷体","Microsoft YaHei","黑体","宋体","Arial",sans-serif;color:#333;}//移动端有默认字体，这样设置了也不起左右，在此写上只是习惯
button{outline: none;}
ul,li{list-style: none;}
@media only screen and (min-width: 320px){
html {
font-size: 42.667px!important;
}
}
@media only screen and (min-width: 360px){
html {
font-size: 48px!important;
}
}
@media only screen and (min-width: 375px){
html {
font-size: 50px!important;
}
}
@media only screen and (min-width: 412px){
html {
font-size: 54.933px!important;
}
}
@media only screen and (min-width: 414px){
html {
font-size: 55.2px!important;
}
}
.clearfix:after{
content:"";
display: block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
h2{
height:1rem;
line-height:1rem;
font-size:0.4rem;
background: #c2110c;
color:#fff;
text-align: center;
}
.img-list{
padding:0 0.4rem 0.4rem;
}
.img-list li.on{
border-color: #c2110c;
color:#c2110c;
}
.img-list li{
width:2rem;
height:0.4rem;
line-height:0.44rem;
text-align: center;
font-size: 0.2rem;
float: left;
margin-top:0.28rem;
margin-right: 0.28rem;
-webkit-border-radius:0.08rem;
-moz-border-radius:0.08rem;
border-radius:0.08rem;
border:1px solid #333;
}
.img-list li:nth-child(3n){
margin-right:0;
}
.operat{
margin:0 0.4rem 0.4rem;
}
.operat input{
width:3.4rem;
height:0.4rem;
font-size: 0.25rem;
-webkit-border-radius:0.08rem;
-moz-border-radius:0.08rem;
border-radius:0.08rem;
padding: 0 0.4rem;
outline: none;
border:1px solid #333;
}
.operat button{
height:0.41rem;
width:1rem;
border:none;
background: #c2110c;
color:#fff;
-webkit-border-radius:0.1rem;
-moz-border-radius:0.1rem;
border-radius:0.1rem;
}
.operat p{
margin:0.2rem;
text-align:right;
}
</style>
</head>
<body>
<header>
<h2>元宵节祝福神器</h2>
</header>
<section>
<div class="img-list">
<ul class="clearfix">
<li onclick="changeImg(1)" class="on">金狮闹春</li>
<li onclick="changeImg(2)">彩灯送福</li>
<li onclick="changeImg(3)">合家团圆</li>
<li onclick="changeImg(4)">鸡闹元宵</li>
<li onclick="changeImg(5)">共度佳节</li>
<li onclick="changeImg(6)">喜迎元宵</li>
<li onclick="changeImg(7)">诗画送福（1）</li>
<li onclick="changeImg(8)">诗画送福（2）</li>
<li onclick="changeImg(9)">元宵佳节</li>
</ul>
</div>
<div class="operat">
<input id="name" type="text" placeholder="请输入您的名字" maxlength="10">
<button class="pro" onclick="drawImage()">生成</button>
<p>温馨提示：长按图片可保存到手机或直接发送给朋友！</p>
</div>
<div class="before" style="width:100%;height:100%;text-align: center">
<img id="imgbox" src="data:images/1.png" alt="" style="width:80%;">
</div> <div class="pic">
<canvas id="myCanvas" style="display: none;">
您的浏览器不支持canvas
</canvas>
</div> </section>
<script>
var data = [//将每张图片上字体的样式、大小、在图片上的位置记录下来，以便于换到不同图片时获取所需信息（移动端字体样式并不能这样设置，字体样式只适合PC端）
{"family":"微软雅黑","size":"0.053","x":"0.291","y":"0.515","color":"#fa112e"},
{"family":"微软雅黑","size":"0.075","x":"0.5","y":"0.645","color":"#030000"},
{"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.645","color":"#fff"},
{"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.545","color":"#030000"},
{"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.755","color":"#030000"},
{"family":"微软雅黑","size":"0.053","x":"0.2","y":"0.57","color":"#030000"},
{"family":"微软雅黑","size":"0.053","x":"0.72","y":"0.41","color":"#ed3a50"},
{"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.54","color":"#030000"},
{"family":"微软雅黑","size":"0.053","x":"0.5","y":"0.795","color":"#030000"}
]
function changeImg(id){
var imgbox = document.getElementById("imgbox");
imgbox.src = "images/"+id+".png";//将图片名称设置为比较简单的名称方便与通过id切换
var liList = document.getElementsByTagName("li");
for(var i = 0; i < liList.length; i++){
liList[i].className = "";
}
liList[id-1].className = "on";
}
var canvas = document.getElementById("myCanvas");
function drawImage() {
var name = document.getElementById("name").value;
var html = "";
if(name){
var on = document.getElementsByClassName("on")[0];
var liList = document.getElementsByTagName("li");
var index = getIndex(on,liList); //获取有on类名的li
var clientWidth = getWidth(); //获取屏幕宽度用于canvas宽度自适应移动端屏幕
canvas.width = 2*clientWidth; //由于手机屏幕时retina屏，都会多倍渲染，在此只设置2倍，如果直接设置等于手机屏幕，会导致生成的图片分辨率不够而模糊
canvas.height = 2*clientWidth*667/375;
var context = canvas.getContext("2d");
var imgbox = document.getElementById("imgbox");
var num = index + 1;
var src = "images/"+num+".png";
var img = new Image();//创建图片对象，用于在canvas中渲染
img.src=src;
var w = 2*clientWidth;
img.onload = function(){ //当图片加载成功以后再进行下一步动作，如果不加这句，会生成黑图
context.drawImage(img, 0, 0, w, w*667/375);//按设计稿图片比例渲染图片高度
var font = "600 " + data[index].size*w + "px " + data[index].family;//文字大小也得按照分辨率变化，类似使用rem
context.font = font;
context.textAlign = "center";
context.fillStyle = data[index].color;
if(index == 0){
var x = w*data[index].x;
var oy = data[index].y*w*667/375;
for(var i = 0; i < name.length; i++){
var y = oy + 44*i;
context.fillText(name[i],x,y);
}
}else if(index == 5){//当文字时竖向显示的时候，以中间为基准，向上向下一行插入一个字
var x = w*data[index].x;
var oy = data[index].y*w*667/375;
for(var i = 0; i < name.length; i++){
var y = oy + 44*i;
context.fillText(name[i],x,y);
}
}else{
context.fillText(name,w*data[index].x,data[index].y*w*667/375);
}
var downloadImg = canvas.toDataURL("image/jpeg");
imgbox.src = downloadImg;
}
}else{
alert("请输入您的名字！");
} }
function getWidth(){
if(window.innerWidth){
return window.innerWidth;
}
else{
if(document.compatMode == "CSS1Compat"){
return document.documentElement.clientWidth;
}
else{
return document.body.clientWidth;
}
}
} function getIndex(current,obj){
var length = obj.length
for(var i = 0; i<length; i++) {
if (obj[i] == current) {
return i;
}
}
}
</script>
<script src="http://zishu010.com/JS/baidu_statistics.js?v=2.0.5"></script>
</body>
</html>
移动端canvas文字图片合成并生成图片（canvas宽度自适应移动端屏幕）的更多相关文章
- Canvas 实现图片合成并下载合成图片
现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...
- Html5 Canvas 实现图片合成
多个图片合成一张 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- android 文字图片合成
引用:http://blog.csdn.net/cq361106306/article/details/8142526 两种方法: 1.直接在图片上写文字 String str = "PIC ...
- JS图片宽度自适应移动端
$(function(){ $("#d-intro").find("img").each(function () { $(this ...
- canvas转图片
<script> var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100; window.onload ...
- canvas文字自动换行、圆角矩形画法、生成图片手机长按保存、方形图片变圆形
canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineH ...
- canvas图片合成中的坑
需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...
- PHP图片加水印文字及图片合成缩放
<?php //图片添加文字水印 /*$bigImgPath = 'background.png'; $img = imagecreatefromstring(file_get_contents ...
- 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
随机推荐
- Echart ，X轴显示的为tooltip内显示的一部分内容放在上面显示的一部分如下图所示
如图所示:X轴只显示tooltip部分内容解决方案 在xAxis下面,实现方法如下 axisLabel: { interval: 0, formatter:function(value) { var ...
- redis+thinkphp5的注册、登陆、关注基础例子
最近初步接触redis,结合thinkphp5与redis,写了一个用户注册的基础例子,用于学习. 这个例子是结合了兄弟连的redis视频,最后两节的内容写的:https://study.163.co ...
- Java运行时数据区
目录 1. 概述 2. Java内存结构 3. 程序计数器 4. Java虚拟机栈 5. 本地方法栈 6. 堆 7. 方法区 8. 运行时常量池 9. 直接内存 10. 总结 1. 概述 作为日常的J ...
- javascript中的map和reduce
今天在看“廖雪峰官方网站”的js教程时,看到了map和reduce.其中有一个练习题是:不使用js内置的parseInt()函数,利用map和reduce操作实现一个string2int()函数(先将 ...
- JAVA8 Stream集合操作：中间方法和完结方法
StreamLambda为java8带了闭包,这一特性在集合操作中尤为重要:java8中支持对集合对象的stream进行函数式操作,此外,stream api也被集成进了collection api, ...
- Linux - 远程管理常用命令
远程管理常用命令 目标 关机/重启 shutdown 查看或配置网卡信息 ifconfig ping 远程登录和复制文件 ssh scp 01. 关机/重启 序号 命令 对应英文 作用 01 shut ...
- 《Http权威指南》读书笔记
第7章 Http缓存 1.什么是Http缓存? http缓存指的是: 当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要请求资源"的副本,就可以直接从浏览器缓存中提取 ...
- 关于iOS刷新UI需要在主线程执行
为什么一定要在主线程刷新UI? 安全+效率:因为UIKit框架不是线程安全的框架,当在多个线程进行UI操作,有可能出现资源抢夺,导致问题. 其实:在子线程是不能更新UI的, 看到能更新的结果只是个假象 ...
- snmp监控f5
1.硬盘各分区使用情况 2.pool数量.vs数量 3.cpu使用率 4.内存使用率 5.电源 6.风扇 7.端口状态及流量 8.HA状态(主备情况及HA是否处于建立状态) 9.主备机同步状态
- Spring常用注解总结(2)
@Autowired "自动填装",作用是为了消除代码JAVA代码里面的getter/setter与bean属性中的property. @Autowired默认按类型匹配的方式,在 ...