javascript+canvas实现的上传图片在线添加文字插件

所属分类: 网页特效-实用工具    2023-12-01 09:00:22

javascript+canvas实现的上传图片在线添加文字插件 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

javascript+canvas实现的上传图片在线添加文字插件(共3个文件)

    • index.html

使用方法

var text_title ="";
var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin="anonymous";

window.addEventListener('load', DrawPlaceholder)

function DrawPlaceholder() {
    img.onload = function() {
        DrawOverlay(img);
        DrawText();
        DynamicText(img)
    };
    img.src = 'https://unsplash.it/400/400/?random';
  
}
function DrawOverlay(img) {
    ctx.drawImage(img,0,0);
    ctx.fillStyle = 'rgba(30, 144, 255, 0.4)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function DrawText() {
    ctx.fillStyle = "white";
    ctx.textBaseline = 'middle';
    ctx.font = "50px 'Montserrat'";
    ctx.fillText(text_title, 50, 50);
}
function DynamicText(img) {
  document.getElementById('name').addEventListener('keyup', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    DrawOverlay(img);
    DrawText(); 
    text_title = this.value;
    ctx.fillText(text_title, 50, 50);
  });
}
function handleImage(e) {
    var reader = new FileReader();
    var img = "";
    var src = "";
    reader.onload = function(event) {
        img = new Image();
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
        src = event.target.result;
        canvas.classList.add("show");
        DrawOverlay(img);
        DrawText(); 
        DynamicText(img);   
    }

    reader.readAsDataURL(e.target.files[0]); 
 
}
function convertToImage() {
	window.open(canvas.toDataURL('png'));
}
document.getElementById('download').onclick = function download() {
		convertToImage();
}

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 实用工具

jquery可自定义设置返回指定位置插件

一款可自定义设置的返回顶部插件,具备功能: 淡入淡出效果、自定义滚动时间、将历史记录添加到浏览器、可以设置为滚动到页面上的指定位置。
  实用工具
 5252  0

jquery简易版在线计算器插件

一款简单的在线计算器插件,可用于加法、减法、乘法和除法等基本运算。
  实用工具
 3226  0

javascript可自定义规则的密码生成器插件

一款在线密码生成器工具,支持自定义密码长度和并设置(小写、大写、数字、特殊符号),核心功能是根据用户定义的规则生成随机安全的密码。支持在线滑动进度条设置密码位数,选择不同的字符组合,点击按钮即可生成,带自动复制密码功能。
  实用工具
 2212  0

原生js实现的浏览器窗口大小更新状态检测工具

基于JavaScript的optimizedResize事件检测浏览器窗口的大小,实时获取当前更新状态。通常可运用于web开发人员管理调整大小触发的操作。包含了三种不同状态:等待、更新中、已更新。
  实用工具
 2256  0

评论数(2) 回复有机会获得K币 用户协议

    great0
    2023-12-12 14:30:05
    哎哟,不错哦~ 下载试试!😚
    回复
    masker0
    2023-12-04 15:53:26
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论