小编PLA*_*UBE的帖子

正如这里所讨论的,我试图在div中覆盖一个图像.只需这些简单的线条,我就可以通过background-image以下方式实现:

div{
    width: 172px;
    height: 172px;
    border-style: solid;
    background-image: url('../images/img1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

结果,图像在div中居中并且被调整大小以使其适合div的宽度或高度(取决于图像是否宽或者不同).现在我想在div中使用image标签获得相同的结果.

<div>
  <img src="images/img1.jpg"/>
</div>

有没有办法通过简单的CSS来解决这个问题？

Stackoverflow上的新功能.我正在开发一个解决方案,我可以使用服务器上的jcrop将裁剪后的图像保存为.jpg文件.图像也用作立方体表面上的纹理(我使用的是三个.js).我不是一个专业的程序员,但我已设法将表面上的图片保存在服务器上.

但遗憾的是,文件的分辨率始终为96 DPI,质量较差(即使分辨率为2000px X 2000px).我试图找到一个解决方案,我仍然希望找到更现代的东西.我听说过这个toDataURLHD方法.我尝试过,但它没有用.

这是我的服务器上传的Javascript代码:

    function saveIt(){
var data_image_1=$('#img_front1_CANVAS_PREVIEW')[0].toDataURL('image/jpeg');
var postData = "canvasData="+data_image_1;
var ajax = new XMLHttpRequest();
ajax.open("POST",'upload.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.onreadystatechange=function()
{
    if (ajax.readyState == 4)
    {alert("image saved");}
}
ajax.send(postData);
}

和PHP部分:

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    $rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
    $removeHeaders=substr($rawImage, strpos($rawImage, ",")+1);
    $decode=base64_decode($removeHeaders);
    $fopen = fopen( 'uploads/myImage.jpg', 'wb' );
    fwrite( $fopen, $decode);
    fclose( $fopen );

}

代码工作,我在服务器上获取图像,但质量很差:

原始图像

裁剪图像

有没有办法获得更多的dpi？

编辑:

由于我使用了外部资源,因此我的代码有点复杂.例如,canvas标签是"隐藏的".这里还有一些上传程序的代码.

HTML:

<!--Upload Button-->
<img class="email-avatar" id="img_front1" height="64" width="64" src="img.png">

<!--Opens a popup, where the picture is being …

我正在玩three.js和bootstrap.但是,当使用bootstrap网格时,我的立方体变得扁平,如下所示:

http://imgur.com/a/Ec2Rx

虽然调整窗口大小时,它工作正常:

http://imgur.com/a/xpmVu

我试图在css中修复此问题,但它不起作用:

CSS

@media(min-width:768px) { 

canvas {
    display: block;
    width: 100% !important;
    height: 33% !important;
}
}

canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

有任何想法吗？

编辑:

我也尝试使用js代码,但也没有结果:

JS:

renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.getElementById('render').appendChild( renderer.domElement );
    window.addEventListener( 'resize', onWindowResize, false );

    render();
}

function onWindowResize() {

if (window.matchMedia('(min-width:768px)').matches) {
    renderer.setSize(window.innerWidth, window.innerHeight * 0.33);
    camera.updateProjectionMatrix();
    camera.aspect = window.innerWidth / window.innerHeight;
    render();
}

else {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, …

在这里跟进这个问题我试图使用three.js获得漂浮的3D立方体的良好渲染.相机比例是window.innerWidth / window.innerHeight,因为我使用矩形div容器,我得到一个扁平的立方体.像这样的东西.

我试图让我的div容器与我的屏幕或窗口大小成比例,并且它有效!例如,对于1367x768屏幕:

CSS:

#render {
    width: 450px;
    height: 250px;
}

但!我希望这也适用于不同尺寸,例如智能手机!完全响应是完美的.是否可以使宽度和高度与CSS中的屏幕尺寸完全成比例？

我知道奇怪的问题。这里的主要问题是我正在使用一个名为cropit的很酷的工具。在这种情况下，我们上传一张图像，进行预览，然后根据需要进行处理。

HTML：

<div align="center" id="image-cropper1">

    <!-- This is where user selects new image -->
  <label class="btn btn-success btn-file">Upload Photo<input type="file" class="cropit-image-input"/></label><br><br>

  <!-- This is where the preview image is displayed -->
  <label><div class="cropit-preview"><img class="prepic" src="preloadimage.jpg"></label>

<!-- Here I process the image -->
<button type="button" id="image1pick" class="btn btn-primary" data-dismiss="modal" disabled>OK</button></div>

jQuery的：

$('#image-cropper1').cropit();

$('#image-cropper1').change(function() {
    $('#image1pick').prop('disabled', false);
    });

$('#image1pick').click(function() {
    imageData1 = $('#image-cropper1').cropit('export', {originalSize: true});
    $.post('somephp.php', { imageData1: imageData1 }, function() { $('#image1pick').data('clicked', true) })
    });

现在，我想要实现的是添加另一个<input type="file"/>按钮，一次可以上传6张图片，并在6个不同的 …

前段时间，我在移动设备上的网络浏览器中进行拖放操作时遇到了困难。默认的 JavaScript 事件在移动设备上不起作用。您只能使用触摸事件。

就我而言，我需要通过拖放来交换两个图像以及 ID。这里有一个例子：

div{
  display:inline-block;
  border:1px solid #0b79d0;
}

div, img{
        width:120px;
        height:120px;
    }

<div id="1" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="a" draggable="true" ondragstart="dragStart(event)" src="https://static.webshopapp.com/shops/073933/files/156288269/345x345x1/artibalta-white-tiger.jpg"/>
</div>

<div id="2" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="b" draggable="true" ondragstart="dragStart(event)" src="https://yt3.ggpht.com/a-/AN66SAyfsmao4f1EEOqkBP2PgpSUcabPJXLZ1sLEnA=s288-mo-c-c0xffffffff-rj-k-no"/>
</div>

<div id="3" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" draggable="false">
    <img id="c" draggable="true" ondragstart="dragStart(event)" src="https://kinderbilder.download/wp-content/uploads/2018/10/animals-for-dolphin-drawings-pencil-drawings-pinterest-verwandt-mit-delfine-zeichnen-100x100.jpg"/>
</div>

<script>
    function allowDrop(ev){
        ev.preventDefault();
    }

    function dragEnter(ev){
        var element = document.getElementById(ev.target.id);
        element.style.border = "dotted";
        element.style.borderColor = "#0b79d0";
    }

    function dragLeave(ev){
        var element = document.getElementById(ev.target.id);
        element.style.border …