个人中心
gpt4 book ai didi

html - 将图像上传到现有的 HTML5 Canvas

转载 作者：行者123 更新时间：2023-11-28 03:34:41 25 4
gpt4 key购买 nike

我有一个带有设置背景图像的 Canvas 。然后您可以在 Canvas 顶部添加文本，它是可拖动的。我希望用户能够上传可拖动(最终可调整大小)的图像以添加到 Canvas 。

我现在的代码如下:

var URL = window.webkitURL || window.URL;

window.onload = function() {
    var input = document.getElementById('input');
    input.addEventListener('change', handleFiles, false);
}

function handleFiles(e) {
    var ctx = memestage.getContext('2d');
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.onload = function() {
        img.add(bg);
        ctx.drawImage(img, 5, 5);    
    }
    img.src = url;

}

如有任何建议，我们将不胜感激。可应要求提供更多信息。谢谢!

最佳答案

这是在您的身份证上绘制学生姓名和照片的 KineticJS 代码。

学生可以在卡片周围拖动他们的名字和照片。

照片不可调整大小，但我已缩放照片以适合您卡片的照片区域。如果更改卡片布局，您可以轻松调整 KineticJS 图像对象中的宽度/高度。

这是代码和 fiddle :http://jsfiddle.net/m1erickson/9jTtb/ 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 472,
        height: 286
    });

    var layer=new Kinetic.Layer();
    stage.add(layer);

    var preload=[];
    var images=[];
    preload.push("http://dl.dropbox.com/u/139992952/idcard.png");
    // I use a demo photo here
    // Of course in your live site, you would use URL.createObjectURL
    preload.push("http://macmcrae.com/wp-content/uploads/2009/07/bubblebobble.jpg");
    preloadImages(preload,init);

    function init(images){
        KImage("background",0,0,472,286,false,layer,images[0]);
        KImage("Photo",284,105,160,160,true,layer,images[1]);
        KText("Name",50,190,"Verdana",27,"black",true,layer,"Sam Student");
    }

    // image preloader
    function preloadImages(sources,callback){
        var images=[];
        var count=0;
        for(var i=0;i<preload.length;i++){
            images[i]=new Image();
            images[i].onload=function(){
                if(++count==preload.length){
                    callback(images);
                }
            }
            images[i].src=preload[i];
        }
    }

    // build the specified KineticJS Image and add it to the stage
    function KImage(id,x,y,width,height,isDraggable,layer,img){
        var kImg=new Kinetic.Image({
            image:img,
            id:id,
            x:x,
            y:y,
            width:width,
            height:height,
            draggable:isDraggable
        });
        layer.add(kImg);
        stage.draw();
    }

    // build the specified KineticJS Text and add it to the stage
    function KText(id,x,y,font,fontsize,color,isDraggable,layer,text){
        var kText=new Kinetic.Text({
            text:text,
            id:id,
            x:x,
            y:y,
            fontFamily:font,
            fontSize:fontsize,
            fill:color,
            draggable:isDraggable
        });
        layer.add(kText);
        stage.draw();
    };

}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
    <img id="test"/>
</body>
</html>

[编辑以回答 OP 的额外请求]

我看了你的代码，但找不到任何 php 上传脚本，所以这是一般的想法。

我假设您已经在 php.ini 中设置了您的配置，尤其是这些:

  • file_uploads = true;
  • upload_max_filesize=2M;//或者您希望用户上传的任何最大尺寸
  • post_max_size=8M;

我假设您已经创建了一个文件夹来保存您上传的文件并赋予了网络服务器所有权(或足够的权限)。下面的代码假设子目录是“uploads”。

然后下面的 PHP 代码将上传您的用户图像，并使用与用户原始文件相同的名称将其存储在“uploads”目录中。

您仍然必须修改此代码以进行您认为必要的任何边界/错误检查。就个人而言，我会至少做到这些:

  • $_FILES 不为空，是一个数组
  • $_FILES 报告没有发生错误
  • 文件名只包含这些英文字符[0-9][A-Z][.]
  • 文件名不超过250个字符
  • 文件不为空
  • 文件不大于 upload_max_size
  • 文件具有以下扩展名之一:.jpg、.jpeg、.gif、.png//或您接受的任何扩展名
  • 文件不存在//添加覆盖或退出的逻辑
  • 捕获上述测试失败的例程

php 部分看起来像这样:

<?php

var $uploadDirectory="uploads/";  // or whatever dir you set up
var $maxFileSize=1000000;         // or whatever max-size you allowed

// assuming 'file' is the name of your input-type-file tag

// oops, got an error
if ($_FILES["file"]["error"] > 0){echo "Error occured: " . $_FILES["file"]["error"] . "<br>"; }

// get filepaths
var $tempfile=$_FILES["file"]["tmp_name"];
var $basefile=basename($_FILES['file']['name']);

// save the user's file
move_uploaded_file( $tempfile, $uploadDirectory . $basefile );

// do whatever other postback stuff you need to do

?>

HTML 表单应该是这样的:

<form action="upload.php" enctype="multipart/form-data" method="post">
    <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
    <input type="file" name="file"/>
    <input type="submit" name="submit" value="upload" />
</form>

关于html - 将图像上传到现有的 HTML5 Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15193610/

25 4 0
文章推荐： javascript - 如何在 Bootstrap Vue 中使用 ？
文章推荐： javascript - 为什么我的 "Back to Top"按钮在 Firefox 上失败？
文章推荐： C++/CLI 包装器 LNK2028 和 LNK2019 错误
文章推荐： c++ - 在 C++ 中使用 pthreads 实现线程池
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com