相关疑难解决方法(0)

Apple的iPad Mini是iPad 2的小型克隆,其方式比我们想要的更多.在JavaScript中,该window.navigator对象为Mini和iPad 2公开了相同的值.到目前为止,我的测试检测差异并未导致成功.

为什么这很重要？

由于iPad Mini和iPad 2屏幕的像素相同但实际尺寸(英寸/厘米)不同,因此它们的PPI(每英寸像素数)不同.

对于提供友好用户界面的web应用和游戏,某些元素相对于用户的拇指或手指位置进行大小调整,因此,我们可能想要缩放某些图像或按钮以提供更好的用户体验.

到目前为止我尝试过的事情(包括一些非常明显的方法):

• window.devicepixelratio
• CSS元素宽度,单位为cm
• CSS媒体查询(例如resolution和-webkit-device-pixel-ratio)
• 类似单位的SVG图纸
• 在设定的时间内进行各种CSS webkit变换并计算渲染帧requestAnimFrame(我希望能够检测到可测量的差异)

我是新鲜的想法.你呢？

更新 感谢目前为止的回复.我想评论人们投票反对检测iPad mini而不是2,因为苹果公司已经呃,这是一个统治它们的指导方针.好的,这就是我的理由,为什么我觉得在这个世界上真的有意义的是知道一个人是在使用iPad mini还是2.并且我的理由是你喜欢的.

iPad mini不仅是一个小得多的设备(9.7英寸对7.9英寸),但它的外形允许不同的用途.除非你是查克诺里斯,否则iPad 2通常在游戏时用双手握住.迷你体积更小,但它也更轻巧,允许您用一只手拿着它并使用另一只手轻扫或点击或诸如此类的游戏.作为一名游戏设计师和开发者,我只想知道它是否是迷你游戏,所以如果我愿意,我可以选择为玩家提供不同的控制方案(例如在与一组玩家进行A/B测试之后).

为什么？嗯,事实证明,大多数用户都倾向于使用默认设置,因此当播放器加载时,请忽略虚拟拇指杆并在屏幕上放置其他基于抽头的控件(这里只是给出一个任意示例)比赛的第一次是我,恐怕其他游戏设计师,很想能够做到.

因此,恕我直言,这超出了粗略的手指/指南讨论,只是Apple和所有其他供应商应该做的事情:允许我们唯一地识别您的设备并思考不同而不是遵循指南.

我需要一种在不使用HTML元素的情况下在JavaScript中调整图片大小的方法.

我的移动HTML应用程序拍摄照片,然后将它们转换为base64字符串.此后,我需要在将它们发送到API之前调整它们的大小,以节省存储空间.

我正在寻找一种不同的,更合适的方法来调整它们然后使用canvas元素.有办法吗？

我试图使用PDF.js读取整个.pdf文档,然后在单个画布上渲染所有页面.

我的想法:将每个页面渲染到画布上并获取ImageData(context.getImageData()),清除画布做下一页.我将所有ImageDatas存储在一个数组中,一旦所有页面都在那里,我想将数组中的所有ImageDatas放到一个画布上.

var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
    //Prepare some things
    var canvas = document.getElementById('cv');
    var context = canvas.getContext('2d');
    var scale = 1.5;
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
        pdf = _pdf;
        //Render all the pages on a single canvas
        for(var i = 1; i <= pdf.numPages; i ++){
            pdf.getPage(i).then(function getPage(page){
                var viewport = page.getViewport(scale);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                page.render({canvasContext: context, viewport: viewport});
                pages[i-1] = context.getImageData(0, 0, canvas.width, canvas.height);
                context.clearRect(0, 0, canvas.width, canvas.height);
                p.Out("pre-rendered page …

我正在尝试从服务器加载图像.

在服务器上动态创建映像,然后将名称[包括相对路径]传递给客户端以加载到画布中.

有3层画布,设置相同大小的图像并将图像加载到一个画布.

一切工作正常的小图像.但对于大图像,[假设超过9000 x 7000像素]它会抛出"Aw Snap"蓝屏错误.有时它设法加载图像但是通过在画布上移动鼠标,移动滚动条或在其上画一条线来抛出"Aw Snap"错误.

我增加了--disk-cache-size但没有帮助.

甚至设置这些值也无济于事[--disable-accelerated-2d-canvas, - blacklist-accelerated-compositing, - black-webgl, - disable-accelerated-compositing, - disable-accelerated-layers]

使用IE和Safari测试 - 工作正常,但有些延迟.

发表您的想法和提示.任何帮助表示赞赏.

这是我的代码

function LoadImage(imageUrl) {
    try {
        var image_View = document.getElementById("imageView");
        var image_Temp = document.getElementById("imageTemp");
        var image_Tempt = document.getElementById("imageTempt");
        var ctx = image_View.getContext("2d");

        var img = new Image();
        img.onerror = function() {
            alert('The image could not be loaded.');
        }
        img.onload = function() {
            image_View.width = img.width;
            image_View.height = img.height;
            image_Temp.width = img.width;
            image_Temp.height = img.height;
            image_Tempt.width = img.width;
            image_Tempt.height …

一点背景:

我正在制作一款基于浏览器的2D游戏.渲染代码将移动的对象和场景对象分成两组,然后将每个组全部绘制到8192x8192画布上,该画布不会直接显示.仅当该组中的某些内容以某种方式更改时才会执行此操作.对于所有帧,完成以下操作:

canvas.drawImage(
  zoneBufferStatic,
  Math.floor((w / 2 - playerX) * tileSize),
  Math.floor((h / 2 - playerY) * tileSize)
);
canvas.drawImage(
  zoneBufferDynamic,
  Math.floor((w / 2 - playerX) * tileSize),
  Math.floor((h / 2 - playerY) * tileSize)
);

(canvas用户可见画布的2d上下文; zoneBufferStatic以及zoneBufferDynamic分别用于场景和移动对象的屏幕外画布; w以及h用户可见画布在画面中的宽度和高度; playerX以及playerY玩家的位置,同样在画面中;并且tileSize是图块一侧的像素数,目前为32)

UI(聊天文本,对话框)直接在可见画布上绘制.

上面显示的两个drawImage调用在我的桌面上完全正常工作(16GB RAM,i7,GTX 780),但我的Chromebook(三星ARM(codenames daisy,snow),2GB RAM)什么都不做.UI正常显示,但不会显示风景和字符.Chrome的开发者控制台中没有错误.我已经确认document.body.appendChild(zoneBufferStatic)在Chrome开发者控制台中使用了后台缓冲区.

有没有更好的方法来做到这一点,或者(非hacky)方式来检测它什么时候失败所以我可以回到直接在可见画布上绘图？

我正在尝试THREE.Texture使用HTML5画布对象更新“ .image”属性。这可以在笔记本电脑上的Chromium（MacOSX）上使用。但是，iPhone Safari和iPhone Chrome均不起作用。根本原因是什么？如何解决？

在Safari中使用Web Inspector时，出现以下错误消息：

WebGL：INVALID_VALUE：texImage2D：无画布。

我使用以下代码更新材质，以确保在更新之前完全绘制了画布：

material.map.image = loaded_canvas[curr_id]; // loaded_canvas stores canvas that has been completed loaded already, drawn by Image() objects.
material.map.needsUpdate = true; 

这是材料的使用方式：

var geometry = new THREE.SphereGeometry(100.0, 32, 32);
var material = new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture(image_path),
    side: THREE.BackSide,
});

奇怪的是，如果我THREE.ImageUtils.loadTexture用来加载图像，它可以正常工作。但是，我的用例是必须使用canvas对象（画布上的多个图像）。

谢谢。

我.toDataURL()对大帆布有问题.我想base64在php文件中加入并解码,但如果我有一个大画布,那么strDataURI变量是空的.

我的代码:

var strDataURI = canvas.toDataURL();
strDataURI = strDataURI.substr(22, strDataURI.length);
$.post("save.php",
{ 
   str: strDataURI
};

是否有任何替代.toDataURL()或某种方式来改变大小限制？

谢谢.

我在这里有一个关于这个问题的HTML 测试页面.出于某种原因,MobileSafari报告Image.width/height任何超过1700像素的图像的属性为其值的一半.也就是说,widthJPG 的属性是2000,但MobileSafari JavaScript将其报告为1000.如果我尝试使用1700px宽图像的相同代码,我得到正确的宽度.

我做的测试加载了两个图像(不同维度的相同图像)并显示JavaScript大小值.我试过:

• Chrome 22,Safari 5.1.7,Firefox 15.0.1全部采用Mac OS X 10.6.8(正确尺寸)
• iOS模拟器4.3 SDK 3.2(大小不正确)
• 带有iOS 5.1的iPad 2(尺寸不正确)
• iOS 4的iPhone 4S(尺寸不正确)

任何想法为什么会这样？我错过了某个地方的设置吗？为什么它适用于某些图像而不适用于其他图像？

测试在这里:http://still-island-1941.herokuapp.com/sizetest.html

这是JavaScript代码:

    var imgBig, imgSmall;

    function init() {
        imgBig = new Image();
        imgBig.onload = handleBig;
        imgBig.src = "/images/size.jpg";
        imgSmall = new Image();
        imgSmall.onload = handleSmall;
        imgSmall.src = "/images/test1.jpg";
        document.getElementById("browser").innerHTML = navigator.userAgent;
    }

    function handleBig() {
        document.getElementById("dimensionsBig").innerHTML = imgBig.width + "x" + imgBig.height; …

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #canvasOne
        {
            border: 1px solid black;            
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
</head>
<body>
    <div align="center">
        <canvas id="canvasOne">
        </canvas>
    </div>

    <script type="text/javascript">

        var myCanvas = document.getElementById("canvasOne");
        var myContext = myCanvas.getContext("2d");

        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

        init();

        var numShapes;
        var shapes;
        var dragIndex;
        var dragging;
        var mouseX;
        var mouseY;
        var dragHoldX;
        var dragHoldY;
        var timer;
        var targetX;
        var targetY;
        var easeAmount;
        var bgColor;
        var nodes;
        var colorArr;

        function init()
        {
            myCanvas.width …

我在使用可移动画布时遇到问题，该画布会随着“玩家”在地图上移动而进行调整。由于绘制 600 个瓷砖，每秒 60 次非常低效，我切换到使用translate3d并且只有draw在玩家越过一个完整的瓷砖时 - 但它一直出现故障并且不能平滑地移动。我将如何正确实现这一目标？

const ctx = canvas.getContext('2d');
canvas.height = 200;
canvas.width = 600;
const tileSize = canvas.height/6;
const MAIN = {position:{x: 120, y: 120}};
const canvasRefresh = {x: 0, y: 20};
document.body.onmousemove = e => MAIN.position = {x: e.clientX, y: e.clientY};
const tiles = {x: 20, y: 20}

function update(){
    moveMap();
    requestAnimationFrame(update);
}
function drawMap(){
    for(var i = 0; i < tiles.x; i++){
        for(var j = 0; j < tiles.y; j++){
            ctx.fillStyle …