使用原生cavans把图片和文字生成一张新的图片并解决失真问题

最新推荐文章于 2024-05-28 10:04:42 发布
最新推荐文章于 2024-05-28 10:04:42 发布
阅读量540 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41227106/article/details/103731402
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>正式邀请函</title>
        <meta name=”description” content="">
        <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="full-screen" content="true" />
        <meta name="screen-orientation" content="portrait" />
        <meta name="x5-fullscreen" content="true" />
        <meta name="360-fullscreen" content="true" />
        <link rel="stylesheet" href="./assets/css/poster1.css?date=10">
    </head>

    <body>

    <div class="operat">
        <input id="name" type="text" placeholder="名字" maxlength="10">
        <button class="submit-btn" onclick="drawImage()"></button>
    </div>
    <img id="imgbox1" src="./assets/images/poster/haibao1.jpg" alt="" style="width:37.5rem;height:81.2rem">
    <div class="pic">
        <canvas id="myCanvas" style="display: none;">
        </canvas>
    </div>

    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/layout.js"></script>
    <script src="./assets/js/index.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
   
    <!--cavans图片和文字截取生成一个img-->
    <script>
       // 绘制图片
      function drawImage() {
        var name = document.getElementById("name").value;
        if(name){
          // 当前html的font-size方便使用rem
          var size = getComputedStyle(window.document.documentElement)['font-size'].split('p')[0]
          var numSize = parseInt(size)

          // //获取屏幕宽度用于canvas宽度自适应移动端屏幕
          var  clientWidth = getWidth();
          var canvas = document.getElementById("myCanvas");
          //由于手机屏幕时retina屏，都会多倍渲染，在此只设置2倍，如果直接设置等于手机屏幕，会导致生成的图片分辨率不够而模糊
          canvas.width = 2*clientWidth;　
          canvas.height = 2*numSize*81.2;

          var context = canvas.getContext("2d");
          var imgbox1 = document.getElementById("imgbox1");
          var src = "./assets/images/poster/haibao1.jpg";
          var img = new Image();//创建图片对象，用于在canvas中渲染
          img.src=src;
          var w = 2*clientWidth;

          //当图片加载成功以后再进行下一步动作，如果不加这句，会生成黑图
          img.onload = function(){
            // 绘制的 img 在 canvas 中的坐标 drawImage(img图片, x开始坐标, y开始坐标, 图片宽度, h图片高度)
            context.drawImage(img, 0, 0, w, 2*numSize*81.2);
            // 设置生成的文字的样式
            var font = "600 " + 2*numSize*1.5 + "px " + '微软雅黑';
            context.font = font;
            context.textAlign = "center";
            context.fillStyle = "#000";
            context.fillText(name,2*numSize*10.5, 2*numSize*22);
            var downloadImg = canvas.toDataURL("image/jpeg");
            imgbox1.src = downloadImg;
            alert('海报已生成，长按转发或者保存')
          }
        }else{
          alert("请输入您的名字！");
        }
      }

      // 获取屏幕宽度
      function getWidth(){
        if(window.innerWidth){
          return window.innerWidth;
        }
        else{
          if(document.compatMode == "CSS1Compat"){
            return document.documentElement.clientWidth;
          }
          else{
            return document.body.clientWidth;
          }
        }
      }
    </script>
    </body>
</html>
*,body{
    margin: 0;
    padding: 0;
}
.operat input{
    position: absolute;
    top: 20rem;
    left: 7.6rem;
    width: 5rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    background: #f0f4fa;
    border: solid 1px #f0f4fa;
    font-size: 1.5rem;
    font-weight: bold;
}
.submit-btn{
    position: fixed;
    width: 10.95rem;
    height: 2.4rem;
    bottom: 10rem;
    right: 2rem;
    background: url("../images/poster/btn.png") no-repeat;
    background-size: 100% 100%;
    border: 0px solid transparent;
    z-index: 100;
}

图片分别是背景图和按钮图

scarecrowll
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
生成填充文字和图片
angry_rooster的博客
07-07 914
生成填充文字和图片 前端设计中有一个常见的单词叫placeholder，这个词往往表示其对应内容是当前页面中的临时填充内容。在前端页面的设计中，有时为了更好地看出布局效果，需要往页面一些地方填充文字或图片，这时能自动生成地填充文字（placeholder text）和自定义大小的填充图片（placeholder image）就派上用场了 生成填充文字 这里我是利用VSCode内置Emmet来生成填充文字（一些主流的前端常用的编辑器都一般内嵌有填充文字的功能或者支持一些填充文字的插件） 需要输入的emmet指
在图片上添加文字并生成图片
qq_44538193的博客
06-09 3987
在图片上添加文字并生成图片 开发工具与关键技术：Visual Studio 2015 作者：李德新 撰写时间：2019年6月04日 在我们的日常生活中，我们经常能看到各样格式的表单，而且有时候我们还要去填写这些各种各样的不同的表单，但是你真的知道我们的这些表单是如何做出来的吗？而且我们填写的这些真的是表单吗？不，也许我们填写的这些只不...
使用canvas标签，将图片与文案合并方案存在的情况
weixin_69890748的博客
04-28 537
其实，以上如果由前端处理，那方案本身就存在些问题的，一是图片是动态返回的，不是写死的资源，二是就算将图片转base64后合并导出图片，那也得考虑性能问题，图片资源大的情况也不可行。当canvas的内容来自不同的源（即不同的域名、端口或协议）时，浏览器会出于安全考虑限制对其内容的访问。前端拿到两个字段后，要实现拼接姓名在二维码图片正下方，合并成新的图片，并点击保存下来，如下图：。以上代码看完后，合并展示效果是没有问题的，但是最终你在点击保存时，会报错无法保存，是因为。拼接姓名再返回新的url返回给前端保存。
canvas实现截图/图片裁剪功能
最新发布
weixin_49248103的博客
05-28 392
然最后是实现了隐式水印溯源的功能，但对于前端而言，采用的方案依然是不完美的，如果有更好的方案，欢迎一起探讨。
利用 canvas 实现背景图片和其他图片以及文字的组合生成新图片
跟着飞哥学编程（全栈联盟）
06-09 1865
注：以下图片中，二维码部分是我动态生成的，以及姓名和工号位置的参数需要动态替换。利用 canvas 实现在面板上画图以及绘制文字等等。ps：先说一下我是如何在前端通过 js 生成二维码图片。如有问题，可私信咨询我或者加我文末推广微信。这一步如果您没有这个需求可以忽略。页面引入生成二维码的。
使用canvas在前端实现图片合成
热门推荐
小北哥哥和北妈
02-26 2万+
看着总结的不错，我也就拿来主义了，做个记录，侵权必删图片合成最常见的需求有验证码图片，亦或者图片加水印等，这种实现一般都是后端实现的。随着HTML5发展和现代浏览器的占比越来越高，我们其实也可以在前端直接进行图片的合成。优点在于，响应更快，体验更好；如果是和文字进行合成，我们可以利用客户端字体，视觉展现效果更丰富；同时展示和合成全部都是前端完成，因此更利于维护。这里通过举个例子，演示如何在前端实现...
vue - vue中实现对图片添加水印和截图的功能
qq_43886365的博客
08-15 6883
vue中使用cavans对图片添加水印 和 使用html2canvas.js实现图片的截图功能
js+cavans实现图片滑块验证
10-14
在`newSlider.js`中，可能使用了Canvas API的方法如`drawImage`来加载和显示图片，`beginPath`、`moveTo`、`lineTo`等来绘制滑块轨道，以及`clearRect`清除特定区域，实现滑块移动的效果。 5. **滑块验证逻辑**：在...
在Vue中用canvas实现二维码和图片合成海报的方法
01-19
在项目中经常会遇到需要将不同的二维码放到一张通用图片上，提供用户下载 简单来说，就是利用canvas将同等比例的二维码在图片上叠加，生成海报 1. 设置相应比例 一般来说海报背景都是固定的，可以直接放在public...
canvas实现二维码和图片合成的示例代码
12-13
总结一下，这个示例代码展示了如何结合`jr-qrcode`和Canvas API来创建一个功能，该功能可以根据给定的URL生成二维码，并将其与另一张图片合成为一张新图片。关键步骤包括生成二维码Base64字符串、加载图片、在扩大两...
微信小程序简单的canvas裁剪图片功能详解
10-16
主要介绍了微信小程序简单的canvas裁剪图片功能详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Canvas画布图片文字拼接合成，生成图片
11-19
Canvas画布图片文字拼接合成，生成图片，输入内容，填写到图片上
html自动给图片加上水印 代码_前端自动生成图片并下载（差不多60行代码）
weixin_39847556的博客
11-28 960
需求由于一些简单的图片拼合需要处理（大概7~8000张），但是又没有找到合适的傻瓜软件能够很好地解决需求，同时也很令人头疼的是nodejs里面图片处理库，基本上没几个好用，且安装费时费劲 （当然我还是装了）。作为一个有追求的前端，如果能不依靠其他的东西，直接在前端页面上实现它不香么？于是就有了这个小尝试。其实非常简单，仅以此文记录一下，怕以后不用忘记。前奏1.由于canvas的安全限制，我们必须保...
JS前端基于canvas给图片添加水印，并下载带有水印的图片
qq_37831545的博客
02-02 2131
前端原生基于canvas给图片添加水印，并下载带有水印的图片
用canvas将图片和文字转化成照片，并复制到剪贴版
qq_44187211的博客
04-06 909
用canvas将图片和文字转化成照片，并复制到剪贴版 //需引入html2canvas.js //被复制的div var delivery = document.getElementsByClassName("delivery"); //复制的div var seconddelivery = document.getElementsByClassName("seconddelivery"); this.$nextTick(() => { let o
canvas引入图片后变模糊
Jet_Lover的博客
10-09 893
最近用Canvas画一些东西，结果用canvas绘制图片出来是模糊的！！！！ 比如这样 完全失真了！！！ 这是我写的源代码 //html <canvas id="canvas"> </canvas> //js let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d");
canvas 单位问题 类似rem和rpx自适应手机屏幕宽度
powderhose的博客
07-05 7041
//获取屏幕的宽度 var clientWidth = document.documentElement.clientWidth; //根据设计图中的canvas画布的占比进行设置 var canvasWidth = Math.floor(clientWidth*200/720); canvas.setAttribute('width',canvasWidth+'px'); canvas.set
使用canvas将多张图片合并为一张
Xue_BT的博客
02-21 8039
将多张图片合并为一张
canvas转成为图片并下载为本地图片文件
lit_finger的博客
01-13 4651
本次需求为echarts图表，点击下载按钮后可获得当前视图的png图片 echarts官方API里有个方法，可将chart转换为base64格式的url 这里我本地使用canvas模拟，和echarts时一个道理，html代码如下
java中Cavans怎么使用
05-02
Canvas 是 Java 2D API 中一个重要的类，它提供了在一个面板上绘制图形的能力。下面是一个使用 Canvas 绘图的基本例子： ```java import java.awt.Canvas; import java.awt.Color; import java.awt.Graphics; public class MyCanvas extends Canvas { @Override public void paint(Graphics g) { // 设置背景颜色 setBackground(Color.WHITE); // 画一个圆形 g.setColor(Color.RED); g.fillOval(50, 50, 100, 100); // 画一条直线 g.setColor(Color.BLUE); g.drawLine(50, 50, 150, 150); } public static void main(String[] args) { // 创建一个窗口 MyCanvas canvas = new MyCanvas(); canvas.setSize(200, 200); Frame frame = new Frame(); frame.add(canvas); frame.pack(); frame.setVisible(true); } } ``` 在这个例子中，我们继承了 Canvas 类，并重写了它的 `paint` 方法。在 `paint` 方法中，我们先设置了背景颜色，然后使用 `Graphics` 对象绘制了一个圆形和一条直线。最后，我们在 `main` 方法中创建了一个窗口，并将 Canvas 添加到窗口中。 当程序运行时，会在窗口中显示我们绘制的图形。如果需要改变图形，只需要修改 `paint` 方法中的绘制代码即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值