html5画布可以p图,HTML5图像适合发布在画布上

我正在研究HTML5移动应用程序。我正在使用画布元素和文件上传元素。每当用户从手机上点击这个文件上传元素。他看到两种选择。 1.选择现有的照片 2.拍摄新照片HTML5图像适合发布在画布上

如果他选择现有的照片，这是固定好我的画布，但如果他点击新照片，它不适合画布。宽度很好，但画布中显示的点击图片的高度不超过50像素。

我的HTML代码：

我的JavaScript代码

function PreviewImage() {

var oFReader = new FileReader();

oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

oFReader.onload = function (oFREvent) {

var canvas = document.getElementById('myCanvas');

ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, 270, 300);

imageUrl = oFREvent.target.result;

var base_image = new Image();

base_image.src = imageUrl;

base_image.onload = function() {

ctx.drawImage(base_image, 0, 0, 270, 300);

}

};

}

找遍许多网站也没有找到这个问题的解决方案。有什么帮助吗？

我们可以看到一个实例吗？ –

2014-09-11 13:41:11

图像被挤向顶部。 –

2014-09-11 13:44:44

它发生在特定的浏览器中吗？ –

2014-09-11 14:57:22

html5画布可以p图,HTML5图像适合发布在画布上相关推荐

html5 足球比赛阵容图,HTML5/Velocity.js 3D足球阵容
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 (function() { var $closeBtn, $heading, $loadBtn, $load ...
html5图片比例控制,按比例调整图像大小以适应HTML5画布
我正在尝试编写一个jQuery插件,该插件将具有与Zazzle.com上基于Flash的产品编辑器类似的功能.我需要知道的是,使用context.drawImage()画布功能,我可以插入图像并调整其 ...
HTML5 2D游戏引擎研发系列第四章 Canvas技术篇-画布技术-基于手动切片动画
作者:HTML5游戏开发者社区-白泽转载请注明出处:http://html5gamedev.or HTML5 2D游戏引擎研发系列第四章 <Canvas技术篇-画布技术-基于手动切片动画&g ...
【阿里云大学课程】前端必知——HTML5新特性完整视频教程（音频、视频、画布、web存储、动画……）...
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体. 本课程中,你将学习到下列这些HTML5新特性(点击下列课时立即学习): ...
html5标签属性大全_HTML/HTML5 知识点思维导图
HTML 1 - 浏览器 | 浏览器页面构成 2 - 浏览器 | 浏览器内核相关知识点 3 - W3C | 对WEB标准以及W3C的理解与认识? 4 - 标签 | Doctype相关知识点 5 - 标 ...
用html5做一个介绍自己家乡的页面_（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备...
作者 | Jeskson来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变 ...
40个容易上瘾的HTML5网页游戏,总有一款适合你
我记得姐姐家的孩子在刚刚才学会走路,说话还不能完整的时候就已经能自己用小手点出小游戏的网站来一个人自娱自乐.我一直在想这一代跟着计算机一起茁壮成长的孩子会不会也和美国那一代人一样,出现9岁的黑客和计算 ...
#HTML5网页中的文本与图像
HTML5网页中的文本与图像无序列表首先欢迎大家来看我信息安全小萌新的博客!下面我会和大家分享我对于HTML5的学习经验,今天我很想的是HTML5网页中的文本与图像处理问题. 我先放一个案例,通过 ...
HTML5 canvas 设置背景图
页面代码如下 <!DOCTYPE html> <html><head><meta charset="utf-8"><title ...

html5画布可以p图,HTML5图像适合发布在画布上

html5画布可以p图,HTML5图像适合发布在画布上相关推荐

最新文章

热门文章