Tag: html5

单击canvasHTML5上的按钮后，上传的图像显示与背景图像: 我正在使用HTML5和fabric js。我正在拍摄背景图像，并在此背景图像上传图像。但是，当我将canvas转换为图像时，只有上传的图像才会出现。我会告诉你屏幕截图。点击提交按钮后：在第二个屏幕截图中，只会上传图像。但我想上传的图像应该带有背景图片。码： canvas{ border: 1px solid black; } #canvascolor input { height:50px; width:50px; } submit var canvas = new fabric.Canvas(‘canvas’); $(“#canvascolor > input”).click(function () { var img = $(this).attr(‘src’); $(‘#canvas’).css(“background-image”, “url(” + img + “)”); }); document.getElementById(‘file’).addEventListener(“change”, function (e) { var file = e.target.files[0]; var reader = new […]

如何使用jquery旋钮在单个canvas上实现多个拱形？: 我指的是jsfiddle以供参考。在这个蓝色拱门用旋钮减少，但其他拱门不使用旋钮。任何人都可以建议任何参考。 [canvas] [1] [1]： http ： //jsfiddle.net/matthias_h/L5auuagc/ enter code here

如何创建一个图像生成器来组合多个图像？: 更新我正在使用HTML5 canvas和jQuery / JS处理图像生成器。我想要完成的是以下内容。用户可以将2或最多3个图像（类型应为png或jpg）上传到canvas。生成图像应该是1080×1920。如果哈特仅上传2张图片，则图片为1080×960。如果上传了3张图片。每张图片的大小应为1080×640。上传2或3张图像后，用户可以单击下载按钮获取合并后的图像，格式为1080x1920px。 IT应该使用html canvas来完成这项工作。我想出了这个： HTML： Sorry, canvas not supported Generate jQuery的： var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’); canvas.height = 400; canvas.width = 800; var img1 = loadImage(‘http://sofzh.miximages.com/javascript/0e829093-971c-4037-9c1b-864a7be1dbe8.png’, main); var img2 = loadImage(‘http://sofzh.miximages.com/javascript/266px-Ikea_logo.svg.png’, main); var minImages = 2; var imagesLoaded = 0; function main() […]

包含特定div的video背景: 我正在努力将video背景放入div中。 div恰好也有500px的高度和100％的宽度，我希望video背景适合整个div，响应。 HTML // content ‘; CSS #dev_cms_vid_cont { height:500px; position:relative; } #cms_vid { position:absolute; right: 0; bottom: 0; min-width: 100%; height: 500px; width: auto; z-index: 100; background: url(../images/home-intros.jpg) no-repeat; background-size: cover; margin: 0 auto; } 我不介意它是否需要jquery来解决，我只是希望能够拥有包含在特定div中的video背景，并用video覆盖整个div（不一定是显示的整个video）。我究竟做错了什么？

获取html 5video以全屏模式自动打开: 我成功地使用HTML 5video标签和jQuery以全屏模式打开video以响应事件（点击，按键）。如何在页面加载时全屏打开video而不是onclick？任何帮助，将不胜感激。非常感谢！我的HTML：我的JavaScript： $(document).ready(function(){ $(‘#video1’).bind(“playing”, function(){ var elem = document.getElementById(“video1”); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } }); $(‘#video1’).bind(“ended”, function(){ $(“#video_container”).hide(); }); });

如何仅显示结果表中的选定记录: 有两个表使用相同的源。这些表使用了kendo模板的源绑定。目前，这两个表的来源都是employees 。这两个表都显示相同的数据。现在，我们需要修改它以仅显示结果表中的复选框选定记录。此外，当用户单击结果表上的删除按钮时，应在节表中取消选中该复选框。我们需要做些什么修改才能使它在MVVM ？头 MVVM Test Delete $(document).ready(function () { kendo.bind($(“body”), viewModel); }); MVVM var viewModel = kendo.observable({ // model definition employees: [ { name: “Lijo”, age: “28” }, { name: “Binu”, age: “33” }, { name: “Kiran”, age: “29” } ], personName: “”, personAge: “”, //Note: Business functions […]

切换HTML5音频的“静音”属性: 我正在尝试创建一个静音/取消静音按钮，我对jquery很新，所以如果有人能给我任何指针会有帮助： $(“#dinner”).click(function() { var bool = $(“#player”).muted; $(“#player”).attr(“muted”,!bool); });

如何从数据库中检索值并使用（jqtouch + phonegap）在html5中显示它: 我正在尝试使用html5，javascript，jqtouch和phonegap为移动健康制作Iphone应用程序。我这样做是为了学习使用html5 jqtouch和phonegap构建iPhone应用程序的学校项目。我能够使用pName作为数据库表中的列创建一个数据库。但我无法在index.html中的空div（名为patientList的第一个pannel）中填充整个患者姓名列表。我创建了一个名为index.html的文件。此文件具有不同的面板。第一个pannel是一个patientList面板。第二个pannel是在数据库中创建一个新条目。在数据库中创建新条目后，第一个名为患者列表的面板应填充患者的所有姓名。我的代码成功创建了一个数据库，但它没有在PatientList面板中显示患者的任何名称（pName）。我是第一次使用HTML5，CSS，JAVASCRIPT，JQTOUCH和PHONEGAP制作iphone应用程序。我需要你的帮助。我的index.html看起来像这样 patientList + Label Cancel New Patient Save + 我的iphone.js看起来像这样 var jQT = new $.jQTouch({ }); var db; $(document).ready(function(){ $(‘#newEntry form’).submit(createEntry); $(‘#patientList li a’).click(function(){ var nameOffset = this.id; sessionStorage.currentName = nameOffset; // storing the clicked patient name refreshEntries(); }); // creating a […]

带有后退和前进按钮的history.pushState: 我需要使用这个ajax方法制作后退和前进按钮此代码运行良好，浏览器上的URL应该更改但是当你点击后退和前进按钮时，什么也没发生 (function(){ function clickNav(e){ e.preventDefault(); var href = $(this).attr(‘href’); history.pushState(null, null, href); $.ajax({ url: href, dataType: ‘html’, cache: false }).done(function(html){ var $html = $(html); $(‘title’).html($html.filter(‘title’).text()); $(‘#content’).replaceWith($html.find(‘#content’)); $(‘#nav’).replaceWith($html.find(‘#nav’)); $(‘#nav li a’).on(‘click’,clickNav); }); } $(‘#nav li a’).on(‘click’,clickNav); })();

点击一下，在javascript中的两个div中设置两个不同的图像: 我正在使用java脚本实现自定义T恤。现在我点击图像选择后设置一个背景图像。但是现在我想在点击一次后在两个div中设置两个不同的图像。如果用户点击黄色T恤，则在两个不同的div中设置两个图像（正面尺寸图像和T恤的背面图像）。 var bgArray = [ ‘https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg’, ‘https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg’, ‘https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg’, ]; $(“.picker-image”).on(“click”, “img”, function() { $(‘.backgroundIMage’).css({ ‘background-image’: ‘url(‘ + this.src + ‘)’ }); }); $(function() { bgArray.forEach(function(src) { var img = new Image(50, 50); img.src = src; $(“.picker-image”).append(img); }); }); .backgroundIMage{ width:400px; height:300px; outline:1px dotted gray; margin:0 auto; } Front Side Image back Side […]